如何在一个 canvasJS 图表中获取两个数据集的 min/max 值

Question

我有一个包含两个数据集的图表，我正在尝试获取两个数据集的 min/max 值，但目前我什至没有获取任何数据集！对于一个数据集图，使用相同的代码原理，它可以完美地工作。

查看我的两个数据集图的代码：

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",
            yValueFormatString: "##.##",
            xValueFormatString: "hh:mm:ss TT",
            showInLegend: true,
            legendText: "{name} " + yValueP1m0 + " Î¼g/m3",
            toolTipContent: "{y} Î¼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>

Answer 1

在上面的代码中，您刚刚遍历了第一个数据系列的数据点。然而，您需要先遍历每个数据系列，然后遍历相应的数据点。

这里有一个 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;
});

如何在一个 canvasJS 图表中获取两个数据集的 min/max 值

How to get min/max values for two data sets in one canvasJS chart

html

canvasjs