设置缩放的初始值

Question

如何在chartjs-plugin-zoom中设置缩放的初始值？我有这个图表，我需要它只显示10个元素，然后用户可以从左到右滚动显示更多的数据。

​

​

Answer 1

我也有同样的问题。然而，与您相反，我有实时数据，所以我使用chartjs-plugin-streaming；https://github.com/nagix/chartjs-plugin-streaming

如果你使用这个插件，你可以在选项部分设置你的持续时间值。这对我很有效：

function adaptZoom5min() {
    myChart.options.scales.xAxes[0].realtime.duration = 300000;
    window.myChart.update();
}

与此相结合：

<button onclick="adaptZoom5min()">5min</button>

希望这也能帮助你(或其他有类似问题的人)

Answer 2

取决于您在图表中显示的标签类型。对于正常的用例，显示数字或字符串，您可以在options.scales.xAxes.ticks对象中包含x轴的最小和最大值。

options: {
  scales: {
    xAxes: [
      {
        display: true,
        ticks: {
          padding: 20,
          min: 10,
          max: 30
        }
      }
    ],
    yAxes: [
      {
        display: true,
        gridLines: {
          borderDash: [4, 8],
          color: '#cdd6db'
        }
      }
    ]
  }
};

当我使用数字或字符串作为x轴标签时，这对我很有效。希望这能帮助你回答你的问题。干杯。:)