Javascript ChartJS折线图拖动和缩放

是否可以在ChartJS上添加拖放和缩放？我想做类似的事情

以下是我如何绘制折线图：

<canvas class="square_margin_less" id="myChart" width="100" height="30" > </canvas>
<script>
new Chart(document.getElementById("myChart").getContext('2d'),
{
    type: 'line',
    data: {
        labels: {{ data.labels|safe }},
        datasets:
        [{
            label: 'x',
            data: {{ data.x }},
            borderColor: 'rgba(233,105,118,1)',
        },
        {
            label: 'y',
            data: {{ data.y }},
            borderColor: 'rgba(96,143,239,1)'
        },
        {
            label: 'z',
            data: {{ data.z }},
            borderColor: 'rgba(144,247,136,1)'
        }]
    },
});
</script>

新图表（document.getElementById（“myChart”）.getContext（“2d”），
{
键入：“行”，
数据：{
标签：{data.labels | safe}}，
数据集：
[{
标签：“x”，
数据：{data.x}，
边框颜色：“rgba（233105118,1）”，
},
{
标签：“y”，
数据：{{data.y}，
边框颜色：“rgba（9614329,1）”
},
{
标签：“z”，
数据：{{data.z}，
边框颜色：“rgba（144247136,1）”
}]
},
});

有什么个性化的方法吗

我没有找到Chart.js的“拖动和缩放”功能以及“平移和缩放”版本的简单示例，所以我决定自己实现演示版本

外部脚本列表非常重要：

hammerjs

，然后是

Chart.bundle.js

和

chartjs plugin zoom.js

const-config={
键入：“行”，
数据：{
标签：[新日期（'2019-08-20'）、新日期（'2019-08-25'）、新日期（'2019-08-30'）]，
数据集：[{
标签：“行”，
数据：[2,5,3]，
边框颜色：“#D4213D”，
填充：假，
}, ],
},
选项：{
比例：{
xAxes：[{
键入：“时间”，
}, ],
},
潘：{
启用：对，
模式：“xy”，
},
缩放：{
启用：对，
模式：“xy”、//或“x”表示“拖动”版本
},
},
};
window.onload=函数（）{
新图表（document.getElementById（'Chart'），config）；
};
要回答您的问题，是的，这是可能的。你可以自己做，或者看看这个插件，一个简单的谷歌搜索出现了。