如何在系列数据中包含字符串以提取工具提示点格式
How to include strings in series data to pull for tooltip point formatting?
这里的初学者,我试图构建一个柱状图,在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>'
}
});
});
- d3.js Chord图的动态工具提示
- Graphiti中是否有任何工具提示功能
- "工具提示"jQuery插件坏了
- 单元格的工具提示或标题不显示超过2000个字符
- d3.js用按钮更新条形图工具提示
- 使Intro.js工具提示响应
- 画布中绘制的矩形区域的弹出工具提示
- 使用CSS/JavaScript更改剑道图工具提示文本颜色
- 禁用NVD3 multiBarHorizontalChart中0值的工具提示
- 如何更改已显示的工具提示
- 如何访问高图表工具提示中的任何特定数据
- 如何在jQuery点击函数中添加并显示引导工具提示
- 我可以't使用jQuery更改工具提示引导程序的位置
- 语义UI中格式化的工具提示
- 柱状图上的Highcharts工具提示
- 引导工具提示用法,在搜索字段中
- 将工具提示添加到d3散点图中
- 如何在系列数据中包含字符串以提取工具提示点格式
- 在工具提示中从Web服务中提取数据
- 如何使用selenium提取工具提示内容,其中工具提示是由javascript动态加载的