Question

点击更新后我无法为饼图制作动画，因此会出现一个包含新内容的新图表，内容正在更新，但图表仍保持原样，我想更新它同时，图表应显示新的线条和点。

这是我的代码：

Traceback (most recent call last):
  File "test.py", line 51, in headerData
    return QtWidgets.QVariant()
AttributeError: module 'PyQt5.QtWidgets' has no attribute 'QVariant'

Answer 1

你需要添加Chart.js Version：1.0.2 form Here而不是它的工作原理。

Html代码：

<canvas id="pieChart" style="height: 325px; width: 550px !important; margin-left:17%; margin-top:3%;"></canvas>

JQuery代码：

 var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
 var pieChart = new Chart(pieChartCanvas);
 var PieData = [ {
         value: '7',
         color: "#F56954",
         highlight: "#F56954",
         label: "abc"
     },
           {
               value: '5',
               color: "#605CA8",
               highlight: "#605CA8",
               label: "xyz"
           },
            {
                value: '9',
                color: "#37495F",
                highlight: "#37495F",
                label: "asdf"
            },
             {
                 value: '4',
                 color: "#2B908F",
                 highlight: "#2B908F",
                 label: "lkh"
             }];
 var pieOptions = {
            //Boolean - Whether we should show a stroke on each segment
            segmentShowStroke: true,
            //String - The colour of each segment stroke
            segmentStrokeColor: "#fff",
            //Number - The width of each segment stroke
            segmentStrokeWidth: 2,
            //Number - The percentage of the chart that we cut out of the middle
            percentageInnerCutout: 50, // This is 0 for Pie charts
            //Number - Amount of animation steps
            animationSteps: 100,
            //String - Animation easing effect
            animationEasing: "easeOutBounce",
            //Boolean - Whether we animate the rotation of the Doughnut
            animateRotate: true,
            //Boolean - Whether we animate scaling the Doughnut from the centre
            animateScale: false,
            //Boolean - whether to make the chart responsive to window resizing
            responsive: true,
            // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
            maintainAspectRatio: true,
            //String - A legend template
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
        };
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        pieChart.Doughnut(PieData, pieOptions);

希望有所帮助。

Answer 2

我发现了最新版Chart.js的问题。

如果你想用动画更新你的图表，它不足以添加数据并按我上面的代码中所示更新它们，你必须首先添加 addEventListener 然后再创建影响发生的新图表：

document.getElementById('update-statistic').addEventListener('click', function() {
    all_brnoi_line.data.datasets.forEach(function(dataset) {
        dataset.data = dataset.data.map(function() {
            return randomScalingFactor();
        });
    });
    var ctx = document.getElementById("chart-area-1").getContext("2d");
    var pieChart = new Chart(ctx, all_brnoi_line);
    var PieData = [{
        labels: MONTHS,
        datasets: [{
            label: "Эффективные - брони",
            data: [
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(),
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor()
            ],
            backgroundColor: window.chartColors.red,
            borderColor: window.chartColors.red,
            fill: false,
            borderDash: [5, 5],
            pointRadius: 15,
            pointHoverRadius: 10,
        }, {
            label: "Неэффективные - брони",
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()
            ],
            backgroundColor: window.chartColors.blue,
            borderColor: window.chartColors.blue,
            fill: false,
            borderDash: [5, 5],
            pointRadius: [2, 4, 6, 18, 0, 12, 20],
        }, {
            label: "Спорные - брони",
            data: [
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor()
            ],
            backgroundColor: window.chartColors.purple,
            borderColor: window.chartColors.purple,
            fill: false,
            pointHoverRadius: 20,
            borderDash: [5, 5],
            pointRadius: [2, 4, 6, 18, 0, 12, 20],
        }, {
            label: "Отменённые - брони",
            data: [
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor()
            ],
            backgroundColor: window.chartColors.yellow,
            borderColor: window.chartColors.yellow,
            fill: false,
            pointHitRadius: 10,
            borderDash: [5, 5],
            pointRadius: [2, 4, 6, 18, 0, 12, 20],
        }]
    }

    ];
    window.myPie.update();
});

如何用动画更新饼图？

2 个答案: