如何在系列数据中包含字符串以提取工具提示点格式？

Question

初学者，我正在尝试构建一个柱形图，在 x 轴上显示用户名，在 y 轴上显示测试分数。在工具提示框中，我试图让它显示测试分数和测试日期。我正在使用 PHP 来填充基于 oracle sql 数据库的图形，因此我将 PHP 混合到我的 javascript 中用于 Highcharts。

我不确定我正在尝试做的事情是否真的可行，但我正在尝试从 sql 数据库中获取测试日期，并将其插入系列数据中，所以我可以将其调出到工具提示框中（这样当您将鼠标悬停在列上时，它会告诉您用户、分数和他们参加考试的日期）。

这就是我正在尝试的方法，但它不起作用，因为我猜测系列数据有一些针对字符串而不是数字的东西。你能提供的任何帮助都会很棒！谢谢！

<br><br><br><br>
<div id="graph1" style="height: 400px; width: <?php echo $chartspace ?>px"></div>
<input id="width" type="range" value="<?php echo $chartspace ?>" min="300" max="<?php echo $chartspacemax ?>" />

<script>
$(function () { 
    $('#graph1').highcharts({
  credits: { enabled:false},
        chart: {
            type: 'column'
        },
        title: {
            text: 'Most Recent Test Scores'
        },
  subtitle: {
            text: 'Drag slider to change the chart width'
        },
        xAxis: {
    categories: [
    
    <?php
    
   $i = 0;
  do {
  echo "'";
  echo $userinfos[$i]['username'];
  echo "',";
  $i++;
   } while ($i<=$count); ?>
                ]
        },
        yAxis: { 
   plotLines: [{
    color: 'red',
    dashStyle: 'shortdash',
    value: 85,
    width: 1,
   }],  
      floor: 0,
            ceiling: 100,
            title: {
                text: 'Test Score (%)'
            }
        },
        series: [{
   showInLegend: false,
   name: 'Test Score',
            data: [
   
        <?php
     
    $i = 0;
   do {
   if($userinfos[$i]['score'] >= 85){
   echo "{y:";
   echo $userinfos[$i]['score'];
   echo ", testdate:";
   echo $userinfos[$i]['most_recent_test_date'];
   echo ", color: '#00A6CF'},";}
   else{
   echo "{y:";
   echo $userinfos[$i]['score'];
   echo ", testdate:";
   echo $userinfos[$i]['most_recent_test_date'];
   echo ", color: 'red'},";}
   $i++;
   } while ($i<=$count-1); ?>]
   }],
  tooltip: {
   shared: true,
   useHTML: true,
   pointFormat: '<tr><td style="color: {series.color}">Score: </td>' +
                '<td style="text-align: right">{point.y} %</td></tr><tr><br><td>Date: </td>' +
                '<td style="text-align: right">{point.testdate}</td></tr>'
  }
    });
$('#width').bind('input', function () {
        $('#graph1').highcharts().setSize(this.value, 400, false);
    });
 
});

</script>

Answer 1

您尝试做的事情应该绝对可行。这是一个工作示例：

http://jsfiddle.net/thfbx7gb/

然而，在这种情况下，我取出了 PHP 并用一些硬编码数据替换了它。

   data: [{y:7, color: '#00A6CF', testdate: '2014-12-12'},{y:2, color:"#FF0000", testdate: '2015-01-03'}, {y:3,color:"#00FF00", testdate:'2014-10-19'}]

所以我认为问题在于您将 PHP 与 javascript 混合在一起并得到一些奇怪的结果。如果没有其他原因，将内联 PHP 包含到 javascript 代码中通常是一个非常糟糕的主意，因为它真的很难阅读和调试。

有几件事让我印象深刻：

您根本不应该为此使用 PHP，但如果您必须这样做，那么您不应该像现在这样使用 do-while 循环。您正在使用带有增量器的 do/while 而不是 for 循环：

$i = 0;
    do {
        echo "'";
        echo $userinfos[$i]['username'];
        echo "',";
        $i++;
    } while ($i<=$count);

这真的应该是：

for ($i=0; $i<=$count; $i++) {
  echo "'{$userinfos[$i]['username']}'";
}

您应该能够看到如何将您正在使用的其他 do/while 循环简化为更简洁的 for 循环。

但这仍然不能消除在 javascript 中包含 PHP 代码的整个问题。你真的应该要么硬编码这些数据，要么从某种外部来源加载它。这样做的典型方法是使用 AJAX 调用来加载数据，然后将其直接传递给图表。

您将拥有一个直接生成数据对象并使用 json_ecode();

将其输出为 JSON 字符串的文件

$output = array();

foreach ($userinfos as $user) {
  $output['categories'][] = $user['username'];
  if ($user['score'] >= 85) {
    $color = "#00A6CF";
  } else {
    $color = "#FF0000";
  }
  $user['color'] = $color;
  $output['seriesdata'][] = $user;
}

echo json_encode($output);

这应该会给您一个 JSON 对象，您可以很容易地阅读它。与此类似的东西（未经测试，如果不进行一些摆弄，它可能无法工作）：

$.getJSON('/generate.php', function(data) {

   $('#graph1').highcharts({
        credits: { enabled:false},
        chart: {
            type: 'column'
        },
        title: {
            text: 'Most Recent Test Scores'
        },
        subtitle: {
            text: 'Drag slider to change the chart width'
        },
        xAxis: {
             categories: data.categories
        yAxis: {    
            plotLines: [{
                color: 'red',
                dashStyle: 'shortdash',
                value: 85,
                width: 1,
            }],     
            floor: 0,
            ceiling: 100,
            title: {
                text: 'Test Score (%)'
            }
        },
        series: [{
            showInLegend: false,
            name: 'Test Score',
            data: data.seriesdata,
        tooltip: {
            shared: true,
            useHTML: true,
            pointFormat: '<tr><td style="color: {series.color}">Score: </td>' +
                '<td style="text-align: right">{point.y} %</td></tr><tr><br><td>Date: </td>' +
                '<td style="text-align: right">{point.testdate}</td></tr>'
        }
    });
});

如何在系列数据中包含字符串以提取工具提示点格式？

How to include strings in series data to pull for tooltip point formatting?

javascript

php

highcharts