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

【问题标题】：chart.js pie chart - how to update dataset with smooth transitionchart.js 饼图 - 如何通过平滑过渡更新数据集
【发布时间】：2021-10-01 02:16:10
【问题描述】：

我有一个 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...感谢您的帮助

干杯

【问题讨论】：

标签： chart.js chart.js3

【解决方案1】：

您覆盖整个数据集，如果您不这样做，只更改该数据集的数据，它将缩小/扩展数据段。

例子：

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>

【讨论】：

非常感谢李，我会试一试
这就像一个魅力 :) 再次感谢您