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。

在chart传递给onPanComplete函数的对象中进行挖掘会发现该scales属性已更新以实现缩放功能。知道了这一点，检索包含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>