在Chart.js和flask中使用多个图表时，图表在缩放时会发生不同的更改

Question

由于某些原因，在滚轮缩放上，我的图表仅替换为一个图表。

首先，我使用flask为每个图表创建一个画布

        <div height=50% id="chartcanvas">
            <canvas id="{{site}}canvas" ></canvas>

        </div>
        {% endfor %}

然后我在每个画布上循环并为其分配一个图表。基本上，我会重新整理每个图表以突出显示某个站点。当页面加载时，它会起作用，但当您尝试在图表上进行交互或缩放时，它只会用其中一个图表（列表中的第一个）替换数据

data_all = ...//initial variable with data

    {% for site in sites %}
    
    var {{site}}data=data_all
    i=1
    for (s of {{site}}data){
    if (s.label == '{{site}}'){
        s.borderColor='#0000ff'
        s.order=0
        } else {
        s.borderColor='rgba(166,166,166,0.2)'}
        s.order=i
    i++
    };
    


        
        var {{site}}ctx = document.getElementById('{{site}}canvas').getContext('2d');
        var {{site}} = new Chart({{site}}ctx, {
          type: 'line',
          data: { datasets: {{site}}data },
          options: {
            responsive: true,
            
            
            zoom: {
                    enabled: true,
                    mode: 'x'
                },
            pan: {
              enabled: true,
              mode: 'xy'
                },
              

            scales: {
              xAxes: [{
                type: 'time'
              }]
            },
            
          }
        });
        
    

    
    {% endfor %}        

我也正在加载这些版本的chart.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.0"></script>
    

Answer 1

解决此问题的一个选项是禁用缩放。现在我没有缩放。。。我还确定问题出在绘图的任何时候，例如调整窗口大小。