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

Question

在启用 zoom/pan 的情况下使用 Chart.js，我正在尝试编写一个函数以仅将 canvas 上可见的内容导出到 CSV。

但我不知道如何只获取用户 zooms/pans 之后的可见数据点。

我知道我可以只查看 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 的功能，并且只抓取当前在 [=30 上绘制的内容=]:

<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() 似乎它在内部做我正在寻找的事情，因为它只会捕获可见点，但它 returns 一个我不能用于我的 Base64 URI arrayToCSV 函数。

Answer 1

toBase64Image 函数不是您想要的，它只是从 canvas.

获取数据 URL

toBase64Image on github.com/chartjs

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

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

Answer 2

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

下面是一个片段，展示了如何使用 plugin-provided functions onPanComplete and 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/chart.js@2.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.4"></script>
<canvas id="chart" style="max-height:125px"></canvas>
<p>
  Visible values: <span id="vv"></span>
</p>

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

Chart.js get array of currently visible points on graph

javascript

arrays

export-to-csv

chart.js