如何获取点高图表中的日期和时间？
P粉848442185
2023-08-31 23:02:00
[PHP讨论组]
<p>我在页面上绘制高图表。
这很好用，但我有一个小问题，在我看来，当我将鼠标悬停在其上时，我没有得到日期和时间。</p>
<p>这就是我的 json 的样子：</p>
<p><code>[{"测量值":"测量值","日期":"日期","数据":["9/5/2022",14.6,"9/5/2022",14.8,"6 -9-2022",15.948,"2022/9/6",17.112,"2022/9/6",</code></p>
<p>我的图表看起来像这样：</p>
<p>你看到左边的气球，它显示数字0：14.6。
14.6 是值，这很好，但 0 是该值的数字，例如另一个点，给出 </p>
<p>但是我如何显示气球中该数字所属的日期和时间？</p>
<p>我的图表代码是这样的：</p>
<pre class="brush:php;toolbar:false;">$.getJSON("mfrmetingen300RG.json", function(data) {
const processedData9 = [];
for (let a = 0; a < data[0].data.length; a += 2) {
processedData9.push([data[0].data[a], data[0].data[a + 1]]);
}
data[0].data = processedData9;
avg = <?php echo $rowj[0]; ?>;
StDev = <?php echo $rowj[1]; ?>;
Aantalwaarden9 = <?php echo $rowj[2]; ?>;
//Cp=(USL-LSL)/(6xstd.Dev) see.:https://www.easycalculation.com/statistics/learn-cp-cpk-calculator.php
//Cpk = (USL-gemiddelde) / (3 x std.Dev) of (gemiddelde-LSL) / (3 x std.Dev)
cpkl1 = (<?php echo $_cpkh10waarde; ?>-<?php echo $_cpkl10waarde; ?>)/(6*StDev);
Cpk1High = (<?php echo $_cpkh10waarde; ?>-avg)/(3*StDev);
Cpk1Low = (avg-<?php echo $_cpkl10waarde; ?>)/(3*StDev);
chart9 = new Highcharts.Chart('container9',{
chart: {
zoomType: 'x',
type: 'line',
marginRight: 130,
marginBottom: 100,
backgroundColor:'azure'
},
rangeSelector: {
buttons: [{
text: '+',
events: {
click() {
return false
}
}
},
{
text: '-',
events: {
click() {
return false
}
}
}]
},
title: {
useHTML: true,
text: "Gemeten MFR waarde van PP 300R Grey Extrusie over de laatste "+(Aantalwaarden9)+" waarden.",
x: -20 //center
},
credits: {
enabled: false
},
subtitle: {text: 'Gem.='+avg.toFixed(2)+' Stdev='+StDev.toFixed(2)+' Cp='+cpkl1.toFixed(2)+' Cpk_High='+Cpk1High.toFixed(2)+' Cpk_Low='+Cpk1Low.toFixed(2)+'',x: -20},
xAxis: {
uniqueNames: false,
type: 'category',
title: {
text: 'Datum'
}
},
yAxis: {
"min":15,
"max":23,
title: {
text: 'MFR'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
plotLines: [{value: <?php echo $_cpkl10waarde; ?>,color: <?php echo $_color_min_line; ?>,dashStyle: 'longdashdot',width: 2,label: {text: 'Minimum'}},
{value: <?php echo $_cpkh10waarde; ?>,color: <?php echo $_color_max_line; ?>,dashStyle: 'longdashdot',width: 2,label: {text: 'Maximum'}},
{value: <?php echo $_cpkm10waarde; ?>,color: <?php echo $_color_guide_line; ?>,dashStyle: 'shortdash',width: 2,label: {text: 'Richtlijn'}},
{value: avg.toFixed(2),color: <?php echo $_color_avg_line; ?>,dashStyle: 'spline',width: 2,label: {text: 'Avg'}},
]
},
tooltip: {
formatter: function() {
return '<b>Meetwaarden</b><br/>'+ this.x +': '+ this.y;
}
},
legend: {layout: 'vertical',align: 'right',verticalAlign: 'top', x: -100,y: 0,floating: true,borderWidth: 0},
series: data,
plotOptions: {
line: {
dataLabels: {
enabled: true
}
}
},
});
chart9.legend.allItems[0].update({name:'MFR'});
}, 1000);
});```</pre></p>
1
763
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
因为您有
category类型 xAxis，所以您的类别名称包含在point.key变量中。因此，根据您的示例，您只需要引用this.keytooltip: { formatter: function() { return '<b>Meetwaarden</b><br/>'+ this.key +': '+ this.y; } },简化演示： https://jsfiddle.net/BlackLabel/87bousnL/
API 参考： https://api.highcharts.com/highcharts/tooltip.headerFormat