这里的初学者，我试图构建一个柱状图，在x轴上显示用户名，在y轴上显示测试分数。在工具提示框中，我试图使其显示测试分数和测试日期。我使用PHP来填充基于oraclesql数据库的图形，所以我将PHP混合到我的JavaScriptforHighcharts中。
我不确定我想做的事情是否真的可行，但我正在尝试从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>您想要做的事情肯定是可能的。这是一个工作的例子：
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>'
}
});
});