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

2022-01-22 00:00:00 arrays export-to-csv javascript chart.js

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

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.

但我不知道如何在用户缩放/平移后仅获取可见数据点.

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

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

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.

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，并且只获取当前在画布上绘制的内容:

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:

<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 函数.

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.

推荐答案

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

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

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

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:

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>

相关文章