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

2022-01-22 00:00:00 javascript chart.js

我有一个这样的图表:

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

Now I need to find the minimum and maximum labels that are inside a pan, when I zoom, for example:

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

The minimum would be 2018-07-16, and the maximum would be 2018-11-3.

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

For panning, I'm using this attribute:

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

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

If I look at the returned object, I see a lot of information about this pan. But I can't find relevant information to conclude these extremum labels.

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

I thought the attribute chartArea would be sufficient, but its value doesn't differ for two very different pans. Same goes for config, boxes, and a lot of other attributes.

如何找到这些极值标签?

How can I find these extremum labels?

推荐答案

我假设你使用的是 chartjs-plugin-zoom 为此.

I assume you're using chartjs-plugin-zoom for this.

挖掘传递给 onPanComplete 函数的 chart 对象发现 scales 属性已更新以实现缩放'n'pan功能.知道了这一点，检索包含您要查找的 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>

相关文章