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

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