ChartJS 极地区域图JS

o8x7eapl 于 2023-11-18 发布在 Chart.js

关注(0)|答案(1)|浏览(167)

我的 Jmeter 板上有一个polarArea图表。我想在上面添加一个动画。你能告诉我怎么做吗？如果你能提供给我一个，我会很高兴的。

// three provinces chart
let threeProvinces = ['Kabul', 'Herat', 'Mazar'];
let provincesCrimes = [131, 95, 50];
const crimeChartThreeProvinces = document.getElementById('crimeChartThreeProvinces');

new Chart(crimeChartThreeProvinces, {
  type: 'polarArea',
  data: {
    labels: threeProvinces,
    datasets: [{
      label: 'Traffic Crimes',
      data: provincesCrimes,
      backgroundColor: [
        'rgba(255,99,132,0.9)',
        'rgba(54,162,235,0.9)',
        'rgba(255,206,86,0.9)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    // new 

    // end new 
  }
});

字符串

chart.js

来源：https://stackoverflow.com/questions/77393486/polar-area-chart-js

1条答案

按热度按时间

nkhmeac61#

这是一个经过编辑的工作片段，带有动画。

<!DOCTYPE html>
<html>

<head>
    <title>PolarArea Chart with Animation</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
    <canvas id="crimeChartThreeProvinces" width="300" height="300"></canvas>

    <script>
        let threeProvinces = ['Kabul', 'Herat', 'Mazar'];
    let provincesCrimes = [131, 95, 50];
    const crimeChartThreeProvinces = document.getElementById('crimeChartThreeProvinces');

    new Chart(crimeChartThreeProvinces, {
            type: 'polarArea',
            data: {
                labels: threeProvinces,
                datasets: [{
                    label: 'Traffic Crimes',
                    data: provincesCrimes,
                    backgroundColor: [
                        'rgba(255,99,132,0.9)',
                        'rgba(54,162,235,0.9)',
                        'rgba(255,206,86,0.9)',
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    animateRotate: true,
                    animateScale: true
                }
            }
        });
    </script>
</body>

</html>

字符串
你必须在图表选项中传递这个

maintainAspectRatio: false,
            animation: {
                animateRotate: true,
                animateScale: true
            }

型

赞(0）回复(0）举报 2023-11-18

我来回答

ChartJS 极地区域图JS

1条答案

相关问题

热门标签

最新问答