Question

我正在使用react来垂直渲染2个图表，折线图和条形图堆栈。当我滚动查看下面的barChart，每次更新后，chartjs，强制我滚动到（0,0）。我看到一些实现在每次更新后都不会移动滚动的位置。

请帮忙

          <canvas id="lineChart"  onLoad={ load() }>
            Your browser does not support canvas, please upgrade to latest browser
          </canvas>

          <canvas id="barChart"  onLoad={ load() }>
            Your browser does not support canvas, please upgrade to latest browser
          </canvas>

   //to load chart.js
    var myChart = new Chart($("#barChart")[0], {
        type: 'bar',
        data: {
            labels: props.labels,
            datasets: [{
                label: props.label,
                data: props.data,
                backgroundColor: props.labels.map(l => props.color) ,
                borderColor: props.labels.map(l => props.borderColor) ,
                borderWidth: 0.01
            }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {beginAtZero: true}
            }]
        }
       }
    });

Answer 1

在销毁图表并重新创建图表时，我遇到了类似的问题。我的解决方法是在销毁之前获取滚动位置并在创建之后重新应用它。例如在jQuery中：

var pos = $(document).scrollTop();
if (chart != undefined)
chart.destroy();

chart = new Chart(ctx, chartOptions);
$(document).scrollTop(pos);

chart.js，每次更新后，避免滚动到顶部位置

1 个答案: