chart.js饼图-如何平滑过渡更新数据集

我有一个chart.js饼状图。当我更新数据集时，我希望饼状图分段能够平滑地调整大小以适应新值(即大小增长/缩小)。

饼状图每次都进行旋转转换。我可以在设置新数据后使用.update('none')关闭旋转过渡，但随后饼图立即改变，没有过渡。

有办法做到这一点吗?

我的饼状图设置代码是:

chartRegion_Emissions_ANZIC_BreakdownChart = new Chart(ctx, {
        type: 'pie',
        options: {  
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                tooltip: {
                    mode: 'nearest',
                    callbacks: {
                        label: function (tooltipItem, data) {
                            return tooltipItem.label + ': ' + addCommas(tooltipItem.raw) + 'kt';
                        }
                    }
                }
            }
        },
        data: {
            labels: [],
            datasets: []
        }
    });

和更新代码(AJAX请求后)是…

chartRegion_Emissions_ANZIC_BreakdownChart.data.labels = data.labels;
                chartRegion_Emissions_ANZIC_BreakdownChart.data.datasets[0] = data.data[0];
                chartRegion_Emissions_ANZIC_BreakdownChart.update();//'none');

我正在使用chart.js版本3.3.2…谢谢你的帮助

欢呼

你覆盖了整个数据集，如果你不这样做，只改变数据集的数据，它会收缩/扩展数据段。

的例子:

const options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      }
    ]
  },
  options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
document.getElementById('update').addEventListener('click', () => {
  chart.data.datasets[0].data = [10, 5, 12, 6, 8, 2];
  chart.update();
})

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <button id="update">
      update data
    </button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>

相关内容

最新更新

热门标签：