ChartJS -在平底锅中找到最小和最大的标签(缩放时)

Question

我有这样的图表：

​

​

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

​

​

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

对于摇摄，我使用以下属性：

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

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

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

我怎样才能找到这些极端标签？

Answer 1

我想你是在用图表-插件-缩放来做这个。

深入研究传递给chart函数的onPanComplete对象，可以发现scales属性被更新以实现缩放‘n’that功能。知道了这一点，检索包含您要寻找的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>

​