如何使用High Charts更改工具提示
[英]How to change tool tip using High Charts
问题描述
I have successfully created a chart using High Chart to compare the expected time & arrival time of a patient. 
我已使用高图表成功创建了一个图表，以比较患者的预期时间和到达时间。
However, I am now having an issue with the label of the columns; 但是，我现在遇到列label的问题; which is displaying time in milliseconds . 它以milliseconds显示时间。
The screen shot below shows the issue: 下面的屏幕截图显示了问题：
How do I change the label to display time in format (H:M:S) 如何更改标签以格式显示时间（H：M：S）
CODE: 码：
<script type="text/javascript">
function drawChart(){
var chart = new Highcharts.Chart({
chart: {
renderTo: 'divforchart',
type:'column',
},
xAxis: {
name:'patients',
categories: [<?php
echo "'".$names[0]."'";
for($i = 1; $i < sizeof($names); $i++){
echo ",'".$names[$i]."'";
}
?>]
},
yAxis: {
type: 'datetime',
dateTimeLabelFormats: {
//force all formats to be hour:minute:second
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
},
min: <?php echo "Date.UTC(".gmdate("Y,m,d,H",strtotime($minDate)).")";?>
},
series: [
{
name: 'Arrival time',
data: [<?php
echo "['".$names[0]."',Date.UTC(".gmdate("Y,m,d,H,i,s",strtotime($Arrival_time[0])).")]";
for($i = 1; $i < sizeof($names); $i++){
echo "
,['".$names[$i]."',Date.UTC(".gmdate("Y,m,d,H,i,s",strtotime($Arrival_time[$i])).")]";
}
?>]
},
{
name: 'Expected time',
data: [<?php
echo "['".$names[0]."',Date.UTC(".gmdate("Y,m,d,H,i,s",strtotime($Expected_time[0])).")]";
for($i = 1; $i < sizeof($names); $i++){
echo "
,['".$names[$i]."',Date.UTC(".gmdate("Y,m,d,H,i,s",strtotime($Expected_time[$i])).")]";
}
?>]
}
]
});
}
</script>
</head>
<body onLoad="drawChart()">
<div id="divforchart" style="height: 400px"></div>
</body>
2 个解决方案
解决方案1
2 2013-04-18 16:56:21
Try with: 试试：
Highcharts.dateFormat(values)
See here: http://api.highcharts.com/highcharts#Highcharts.dateFormat%28%29 请参见： http ： //api.highcharts.com/highcharts#Highcharts.dateFormat%28%29
This if you want it in the serie, or you can change the tooltip. 如果您想在系列中使用它，或者您可以更改工具提示。
series: [{
dataLabels: {
enabled: true,
formatter:function() {
return Highcharts.dateFormat('%H:%M:%S',this.y);
},
style:{color:"black"}
},
data: [data]
}]
Tooltip: 工具提示：
tooltip:{
formatter:function() {
return Highcharts.dateFormat('%H:%M:%S',this.y);
}
}
Your code must look like: 您的代码必须如下所示：
chart: {
renderTo: 'divforchart',
type:'column',
},
tooltip: { ...
解决方案2
1 已采纳 2013-04-18 17:00:24
By the look of it, you are referring to the tooltip, not the dataLabel. 从表面上看，您指的是工具提示，而不是dataLabel。 You can use the formatter function to format the date properly: 您可以使用formatter函数正确格式化日期：
http://api.highcharts.com/highcharts#tooltip.formatter http://api.highcharts.com/highcharts#tooltip.formatter
(if you are in fact talking about the dataLabel, you can do the same thing still: http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter ) （如果你实际上在谈论dataLabel，你仍然可以做同样的事情： http ：//api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter）
I think the default is to numberFormat the y axis value, but you will want to instead use the dateFormat function in your formatter: 我认为默认值是numberFormat y轴值，但是你需要在formatter中使用dateFormat函数：
http://api.highcharts.com/highcharts#Highcharts.dateFormat%28%29 http://api.highcharts.com/highcharts#Highcharts.dateFormat%28%29
If you need help implementing, create a jsfiddle ( http://jsfiddle.net/ ) and post back 如果您需要帮助实现，请创建一个jsfiddle（ http://jsfiddle.net/ ）并回发
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.