Chart.js获取图形上当前可见点的数组

Question

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

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

我知道我可以只查看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)
});

必须有一些内部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());
})

[.toBase64Image()函数似乎在内部完成了我要寻找的工作，因为它只会捕获可见点，但随后返回的Base64 URI不能用于我的arrayToCSV函数。

Answer 1

toBase64Image函数不是您想要的，它只是从画布获取数据URL。

toBase64Image on github.com/chartjs

toBase64Image: function() {
  return this.canvas.toDataURL.apply(this.canvas, arguments);
},

您可以使用onZoomComplete和onPanComplete获取更新的图表数据，它们都从中获取包含chart的对象，您可能会获得有关当前缩放的更多信息，但据我所知，您将需要做一些计算/工作以获得可见点...

Answer 2

图表对象包含minIndex和maxIndex属性，可用于为可见值的数据集slice。

这里是显示如何在平移或缩放图表后使用slice输出可见值的代码段：

plugin-provided functions onPanComplete and onZoomComplete

onPanComplete