如何在一个 canvasJS 图表中获取两个数据集的最小值/最大值答案

【问题标题】：How to get min/max values for two data sets in one canvasJS chart如何在一个 canvasJS 图表中获取两个数据集的最小值/最大值
【发布时间】：2021-03-29 17:52:22
【问题描述】：

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

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

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>

【问题讨论】：

标签： html canvasjs

【解决方案1】：

在上面的代码中，您刚刚遍历了第一个 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;
});

【讨论】：

在我的问题中，我刚刚发布了一个数据集，它工作正常。通过您的示例，我才意识到我的想法或理解是错误的，因为我认为这两个数据集在chart.data[0] 和chart.data[1] 上有区别，但现在我看到正确的是chart.data[i].dataPoint[0]（第一张图）和chart.data[i].dataPoint[1] 第二张图。所以，我修改了我的代码，现在我得到了我需要的一切。谢谢