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"),&nbsp; lt = document.getElementById("lt");new Chart(document.getElementById("chart"), {&nbsp; type: "line",&nbsp; data: {&nbsp; &nbsp; labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],&nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; data: [0, 1, 2, 4, 8, 16, 32, 64, 128, 256]&nbsp; &nbsp; }]&nbsp; },&nbsp; options: {&nbsp; &nbsp; maintainAspectRatio: false,&nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; min: 'c',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max: 'h'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; },&nbsp; &nbsp; plugins: {&nbsp; &nbsp; &nbsp; zoom: {&nbsp; &nbsp; &nbsp; &nbsp; pan: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enabled: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mode: 'x',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPanComplete: function({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let ticks = chart.scales["x-axis-0"]._ticks;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ft.innerText = JSON.stringify(ticks[0]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lt.innerText = JSON.stringify(ticks[ticks.length - 1]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }});<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>&nbsp; First tick: <span id="ft"></span><br>Last tick: <span id="lt"></span></p>