Chart.js get array of currently visible points on graph

题意：Chart.js 获取图表上当前可见点的数组

问题背景：

Using Chart.js with zoom/pan enabled, I am trying to write a function to export only what is visible on the canvas to CSV.

使用启用了缩放/平移的 Chart.js，我正在尝试编写一个函数，将画布上仅可见的内容导出为 CSV。

But I cannot figure out how to get only the visible datapoints after the user zooms/pans.

但是我无法弄清楚在用户缩放/平移后如何仅获取可见的数据点。

I know I can just look at myChart.data.datasets but that would fetch all the points in the chart, not just the currently visible ones.

我知道我可以查看 myChart.data.datasets，但那会获取图表中的所有点，而不仅仅是当前可见的点。

var config = {
    type: 'line',
    data: {
        // data is from API call
    }
        pan: {
            enabled: true,
            mode: 'xy'
        },
        zoom: {
            enabled: true,
            mode: 'xy'
        },
        bezierCurve : false
    }
};

var ctx = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx, config);

$('#exportTheseRunsToCSV').on('click', function() {
    // something like myChart.getVisibleDataPoints() ???
    console.log(chart)
    console.log(chart.data.datasets)
});

There has to be some internal API call to get the visible points, as I also have a function to export the current visible points to PNG and that only grabs what is currently drawn on the canvas:

必须有一些内部 API 调用来获取可见点，因为我还有一个函数可以将当前可见的点导出为 PNG，并且该函数只抓取当前绘制在画布上的内容。

<a id="exportTheseRuns" class="text-white" href="#" download="image.png" download><i class="fas fa-download"></i> Export to PNG</a>

$('#exportTheseRuns').on('click', function() {
    $('#exportTheseRuns').attr('href', myChart.toBase64Image());
})

The function .toBase64Image() seems like it internally does what I am looking for, as it will only capture visible points, but then it returns a Base64 URI which I can't use for my arrayToCSV function.

.toBase64Image() 函数似乎内部执行了我所寻找的操作，因为它只会捕捉可见点，但它返回的是一个 Base64 URI，我无法将其用于我的 arrayToCSV 函数。

问题解决：

The chart object contains minIndex and maxIndex properties that can be used to slice the dataset for the visible values.

图表对象包含 minIndex 和 maxIndex 属性，可以用来切片数据集以获取可见值。

Here's a snippet showing how to use the plugin-provided functions onPanComplete and onZoomComplete to output the visible values after panning or zooming the chart:

这是一个代码片段，演示如何使用插件提供的 onPanComplete 和 onZoomComplete 函数，在平移或缩放图表后输出可见值：

function getVisibleValues({
  chart
}) {
  let x = chart.scales["x-axis-0"];

  document.getElementById("vv").innerText = JSON.stringify(chart.data.datasets[0].data.slice(x.minIndex, x.maxIndex + 1));
}

new Chart(document.getElementById("chart"), {
  type: "line",
  data: {
    labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
    datasets: [{
      data: [0, 1, 2, 4, 8, 16, 32, 64, 128, 256]
    }]
  },
  options: {
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        ticks: {
          min: 'c',
          max: 'h'
        }
      }]
    },
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'x',
          onPanComplete: getVisibleValues
        },
        zoom: {
          enabled: true,
          mode: 'x',
          onZoomComplete: getVisibleValues
        }
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="chart" style="max-height:125px"></canvas>
<p>
  Visible values: <span id="vv"></span>
</p>