javascript - ChartJS - 查找平移内的最小和最大标签(缩放时)

Question

我有一个这样的图表:

现在我需要在缩放时找到平底锅内的最小和最大标签，例如:

最小值是 2018-07-16，最大值是 2018-11-3。

对于平移，我使用了这个属性:

pan: {
    enabled: true,
    mode: 'x',
    onPanComplete: function(e) {
        console.log(e)
    }
}

如果我查看返回的对象，我会看到很多关于这个锅的信息。但是我找不到相关信息来总结这些极值标签。

我认为属性 chartArea 就足够了，但它的值对于两个非常不同的平底锅并没有不同。 config、boxes 和许多其他属性也是如此。

如何找到这些极值标签？

Answer 1

我假设您使用的是 chartjs-plugin-zoom为此。

深入研究传递给 onPanComplete 函数的 chart 对象，可以发现 scales 属性已更新以实现缩放'n'pan功能。了解这一点后，检索包含您要查找的 label 属性的第一个和最后一个报价对象就相当简单了。

下面是一个片段，演示了通过 onPanComplete 访问报价并将它们输出到页面:

let ft = document.getElementById("ft"),
  lt = document.getElementById("lt");

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: function({
            chart
          }) {
            let ticks = chart.scales["x-axis-0"]._ticks;
            ft.innerText = JSON.stringify(ticks[0]);
            lt.innerText = JSON.stringify(ticks[ticks.length - 1]);
          }
        }
      }
    }
  }
});

<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>
  First tick: <span id="ft"></span><br>Last tick: <span id="lt"></span>
</p>