如何解决如何在一个 canvasJS 图表中获取两个数据集的最小值/最大值
我有一个包含两个数据集的图表,我正在尝试获取两个数据集的最小值/最大值,但目前我什至没有获取任何数据集! 使用相同的数据集图代码原理,它可以完美运行。
查看我的两个数据集图的代码:
window.onload = function() {
// first data set for PM2.5
var $dataPointsP2m5 = <?PHP echo json_encode($dataPoints_p2m5,JSON_PRETTY_PRINT | JSON_PRESERVE_ZERO_FRACTION | JSON_NUMERIC_CHECK); ?>;
// second data set for PM1.0
var $dataPointsP1m0 = <?PHP echo json_encode($dataPoints_p1m0,JSON_PRETTY_PRINT | JSON_PRESERVE_ZERO_FRACTION | JSON_NUMERIC_CHECK); ?>;
var chartPm = new CanvasJS.Chart("chartContainer_pm",{
zoomEnabled: true,theme: "light2",title: {
text: "Air Quality Index PM2.5 & PM1.0"
},axisX:{
title: "chart updates every " + updateInterval / 1000 + " secs"
},axisY:{
suffix: " μg/m3"
},data: [
{
type: "line",yValueFormatString: "##.##",xValueFormatString: "hh:mm:ss TT",showInLegend: true,legendText: "{name} " + yValueP2m5 + " μg/m3",toolTipContent: "{y} μg/m3",dataPoints: $dataPointsP2m5
},{
type: "line",legendText: "{name} " + yValueP1m0 + " μg/m3",dataPoints: $dataPointsP1m0
}]
});
chartPm.render();
document.getElementById("getMinMaxdataPoints").addEventListener("click",function(){
var maxYp2m5 = -Infinity;
var minYp2m5 = Infinity;
var viewportMinimum = chartPm.axisX[0].get("viewportMinimum");
var viewportMaximum = chartPm.axisX[0].get("viewportMaximum");
for(var i = 0; i < chartPm.data[0].dataPoints.length; i++){
if(chartPm.data[0].dataPoints[i].x >= viewportMinimum && chartPm.data[0].dataPoints[i].x <= viewportMaximum && chartPm.data[0].dataPoints[i].y > maxYp2m5){
maxYp2m5 = charPm.data[0].dataPoints[i].y;
}
if(chartPm.data[0].dataPoints[i].x >= viewportMinimum && chartPm.data[0].dataPoints[i].x <= viewportMaximum && chartPm.data[0].dataPoints[i].y < minYp2m5){
minYp2m5 = chartPm.data[0].dataPoints[i].y;
}
}
document.getElementById("MinimumP2m5Value").innerHTML = " min. "+ minYp2m5;
document.getElementById("MaximumP2m5Value").innerHTML = " max. "+ maxYp2m5;
});
我的 html 部分是:
<body>
<div class="flex-container">
<div>
<button id="getMinMaxdataPoints">Get min/max.</button><br/>
</div>
<div>
<span>PM2.5 & PM1.0</span><br/>
<span id="MinimumP2m5Value"></span><br/>
<span id="MaximumP2m5Value"></span><br/>
</div>
</div>
</body>
解决方法
在上面的代码中,您刚刚循环了第一个 dataSeries 的 dataPoints。然而,您需要先循环遍历每个 dataSeries,然后遍历各自的 dataPoints。
这是一个 JSFiddle 示例。
document.getElementById("getMinMaxdataPoints").addEventListener("click",function(){
var minContent = "";
var maxContent = "";
var viewportMinimum = chart.axisX[0].get("viewportMinimum");
var viewportMaximum = chart.axisX[0].get("viewportMaximum");
for( i = 0; i < chart.data.length; i++){
var maxYp2m5 = -Infinity;
var minYp2m5 = Infinity;
for(var j = 0; j < chart.data[i].dataPoints.length; j++){
if(chart.data[i].dataPoints[j].x >= viewportMinimum && chart.data[i].dataPoints[j].x <= viewportMaximum && chart.data[i].dataPoints[j].y > maxYp2m5){
maxYp2m5 = chart.data[i].dataPoints[j].y;
}
if(chart.data[i].dataPoints[j].x >= viewportMinimum && chart.data[i].dataPoints[j].x <= viewportMaximum && chart.data[i].dataPoints[j].y < minYp2m5){
minYp2m5 = chart.data[i].dataPoints[j].y;
}
}
minContent += "Series " + (i + 1) + " min. Y value " + minYp2m5 + " | ";
maxContent += "Series " + (i + 1) + " max. Y value " + maxYp2m5 + " | ";
}
document.getElementById("MinimumYValue").innerHTML = minContent;
document.getElementById("MaximumYValue").innerHTML = maxContent;
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。