ChartJS-查找平底锅内的最小和最大标签（缩放时）

传递给 onPanComplete 函数的c $ c>对象显示 scales 属性已更新以实现zoom'n'平移功能。知道这一点后，检索包含您要查找的 label 属性的第一个和最后一个滴答对象相当简单。Digging around in the chart object passed to the onPanComplete function reveals that the scales property is updated to achieve the zoom'n'pan functionality. Knowing this, it's fairly trivial to retrieve the first and last tick objects which contain the label property you're looking for.下面是一个代码片段，演示了如何通过 onPanComplete 访问刻度线并将其输出到页面：Below is a snippet that demonstrates accessing the ticks via onPanComplete and outputting them to the page: 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> 这篇关于ChartJS-查找平底锅内的最小和最大标签（缩放时）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！