logo标签列表

ChartJS 折线图的拖拽和缩放

javascriptpythondjangochart.jslinechart
3

是否可以在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>

有没有个性化的方式可以实现这个功能？
3
回答您的问题，是的，这是可能的。您可以自己完成，或者查看这个简单谷歌搜索结果显示的插件：https://github.com/chartjs/chartjs-plugin-zoom - rmlan
1个回答
3
我没有在Chart.js中发现“拖动和缩放”功能，也没有找到“平移和缩放”版本的简单示例，因此我决定自己实现演示版。
外部脚本列表非常重要：hammer-js，然后是Chart.bundle.js和chartjs-plugin-zoom.js。 

const config = {
  type: 'line',
  data: {
    labels: [new Date('2019-08-20'), new Date('2019-08-25'), new Date('2019-08-30')],
    datasets: [{
      label: 'Line',
      data: [2, 5, 3],
      borderColor: '#D4213D',
      fill: false,
    }, ],
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
      }, ],
    },
    pan: {
      enabled: true,
      mode: 'xy',
    },
    zoom: {
      enabled: true,
      mode: 'xy', // or 'x' for "drag" version
    },
  },
};

window.onload = function() {
  new Chart(document.getElementById('chart'), config);
};
<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/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.6/chartjs-plugin-zoom.js"></script>
<html>
<body>
  <div style="width:380px;">
    <canvas id="chart"></canvas>
  </div>
</body>
</html>

如果有人对其他库感兴趣，我在Victory网站上找到了一个有趣的解决方案，可以为线图提供“刷选和缩放”功能: https://formidable.com/open-source/victory/guides/brush-and-zoom/。 编辑:在“拖动”版本中，您将需要使用缩放。
drag: {
   borderColor: 'hsl(35, 100%, 60%)',
   borderWidth: '3',
   backgroundColor: 'hsl(35, 100%, 60%)',
},
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接