如何在时间序列或 X-Y chartjs 图表上缩放 Y 轴答案

【问题标题】：How to zoom Y axis on time series or X-Y chartjs graph如何在时间序列或 X-Y chartjs 图表上缩放 Y 轴
【发布时间】：2018-03-08 09:59:26
【问题描述】：

有没有人举例说明如何在使用 chartjs 构建的时间序列图上缩放 Y 轴？有谁知道这是否可能？

我一直在使用 chartjs-plugin-zoom。我花了几个小时试验、寻找解决方案并查看 chartjs-plugin-zoom 源代码。

到目前为止，我发现的示例显示条形图正在缩放，而不是时间序列或 X-Y 图表。

我现在通过设置 Y 比例的最小值和最大值来实现一个 hacky Y 轴缩放。这在一定程度上是可行的，但是这样做，您将无法平移和查看图表之外的任何数据。无论如何，不得不这样做似乎是一个障碍。

感谢提供 X-Y 可缩放图表的示例。

【问题讨论】：

标签： chart.js

【解决方案1】：

最终回答了我自己的问题。基本上，https://codepen.io/anon/pen/PGabEK（链接自https://npmjs.com/package/chartjs-plugin-zoom）的示例可以作为时间序列重新完成。

下面的示例 HTML。

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
                data: [
                    { t: '2018-03-29 08:48', y: 20.2 }, 
                    { t: '2018-03-29 16:24', y: 23.1 }, 
                    { t: '2018-04-09 18:24', y: 20.7 }, 
                    { t: '2018-04-10 02:10', y: 24.2 }, 
                    { t: '2018-04-10 09:16', y: 24.2 }
                ],
                type: 'line', 
                radius: 1, 
                hitRadius: 3, 
                fill: false, 
                backgroundColor: 'black', 
                borderWidth: 2, 
                label: 'Some label'
            },
            {
                data: [
                    { t: '2018-03-29 08:48', y: 22.5 }, 
                    { t: '2018-03-29 16:24', y: 22.3 }, 
                    { t: '2018-03-30 00:00', y: 21.5 }, 
                    { t: '2018-03-30 07:36', y: 21.5 }, 
                    { t: '2018-03-30 15:12', y: 21.5 }
                ],
                type: 'line', 
                radius: 1,
                hitRadius: 3, 
                fill: false, 
                backgroundColor: 'black', 
                borderWidth: 2, 
                label: 'Another label'
            }
        ]
    },
    options: {
        pan: {
            enabled: true,
            mode: 'xy'
        },
        zoom: {
            enabled: true,
            mode: 'xy'
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.6/chartjs-plugin-zoom.min.js"></script>

<div id="chartDiv">
  <canvas class="my-4 chartjs-render-monitor" id="myChart" style="display:block;"></canvas>
</div>

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
对不起！有点仓促。现已添加示例。