如何在一个 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;
});

html