Question

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

我一直在使用chartjs-plugin-zoom。我花了几个小时进行实验，搜索解决方案并查看chartjs-plugin-zoom源。

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

我现在通过设置Y刻度的最小值和最大值来实现hacky Y轴变焦。这在一定程度上起作用，但通过这样做，您将失去平移和查看图表外部任何数据的能力。无论如何，不得不这样做似乎是一个躲闪。

感谢一个可行的X-Y可缩放图表的例子。

Answer 1

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

以下示例HTML。

＆＃13;

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'
        }
    }
});

＆＃13;

<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>

＆＃13;

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

1 个答案: