2

我正在尝试使用 chartjs-plugin-zoom 查找缩放事件后当前可见的数据点。以下示例我想出了以下 onZoomComplete 回调，但它不起作用。

function getVisibleValues({chart}) {
    const x = chart.scales.x;
    let visible = chart.data.datasets[0].data.slice(x.minIndex, x.maxIndex + 1);
  }

一个直接的问题是它chart.data似乎不存在（使用console.log(chart.data)它时返回未定义）。与 x.minIndex和相同x.maxIndex......任何关于我做错了什么的想法将不胜感激。

下面是我如何设置图表（数据是 x,y 对的数组）：

ctx = new Chart(document.getElementById(ctx_id), {
  type: "scatter",
  data: {
    datasets: [
      {
        label: "Data",
        lineTension: 0,
        showLine: true,
        data: data,
      },
    ],
  },
  options: {
    animation: false,
    plugins: {
      zoom: {
        zoom: {
          mode: "x",
          drag: {
            enabled: true,
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1,
            backgroundColor: "rgba(54, 162, 235, 0.3)",
          },
          onZoomComplete: getVisibleValues,
        },
      },
    },
  },
});
4

1 回答 1

0

您可以访问c.chart.scales["x-axis-0"]._startValue和c.chart.scales["x-axis-0"]._valueRange。这两个分别给出第一个和最后一个可见值。

这些值可用于获取在 处可用的数据集数据c.chart.config.data.datasets[0].data，或在 处获取标签名称c.chart.config.data.labels。

如果您只需要获取可见的刻度标签，您可以通过简单地访问chart.scales["x-axis-0"].ticks对象来做到这一点。

function getVisibleValues(c) {
  document.getElementById("visibleTicks").textContent = JSON.stringify(
    c.chart.scales["x-axis-0"].ticks // This is one way to obtain the visible ticks
  );

  const start = c.chart.scales["x-axis-0"]._startValue // This is first visible value
  const end = start + c.chart.scales["x-axis-0"]._valueRange // This is the last visible value

  document.getElementById("visibleValues").textContent = JSON.stringify(
    c.chart.config.data.datasets[0].data.slice(start, end + 1) // Access chart datasets
    //Note: You can also get the labels from here, these are available at `c.chart.config.data.labels`
  );
}

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: "# of Votes",
      data: [12, 19, 3, 5, 2, 3]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    plugins: {
      zoom: {
        zoom: {
          // Boolean to enable zooming
          enabled: true,

          // Zooming directions. Remove the appropriate direction to disable
          // Eg. 'y' would only allow zooming in the y direction
          mode: "x",
          onZoomComplete: getVisibleValues
        }
      }
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5/dist/chartjs-plugin-zoom.min.js"></script>
<html>

<body>
  Visible ticks: <span id="visibleTicks">Begin zooming</span><br/>Visible data: <span id="visibleValues">Begin zooming</span>
  <div class="myChartDiv" style="width: 400px;">
    <canvas id="myChart"></canvas>
  </div>
</body>

</html>

于 2021-12-17T17:59:41.987 回答