如何使用 zingchart 以流畅的方式获得动画图表？答案

【问题标题】：How to get animated charts in a fluid like manner with zingchart?如何使用 zingchart 以流畅的方式获得动画图表？
【发布时间】：2019-05-10 08:01:42
【问题描述】：

我正在尝试使用 Angularjs 标签显示图表并且它可以正常工作，但是动画对我不起作用，如果有任何方法可以使动画以连续的方式制作。任何建议，请谢谢

图表：1

$scope.mybatchChart = {
                    type: "pie", 
                    backgroundColor: "#FFFFFF",
                    plot: {
                      borderColor: "#FFFFFF",
                      borderWidth: 5,
                      // slice: 90,
                     animation:{
                         effect:"2",
                         method:"3",
                         sequence:"ANIMATION_BY_PLOT",
                         speed:"ANIMATION_FAST"
                     },
                      valueBox: {
                        placement: 'out',
                        text: '%t\n%npv%',
                        fontFamily: "Open Sans"
                      },
                      tooltip:{
                        fontSize: '10',
                        fontFamily: "Open Sans",
                        padding: "5 10",
                        text: "%npv%"
                      }},
                    title: {
                      fontColor: "#fff",
                      align: "left",
                      offsetX: 10,
                      fontFamily: "Open Sans",
                      fontSize: 20
                    },
                    subtitle: {
                      offsetX: 10,
                      offsetY: 10,
                      fontColor: "#8e99a9",
                      fontFamily: "Open Sans",
                      fontSize: "10",
                      align: "left"
                    },
                    plotarea: {
                      margin: "20 0 0 0"  
                    },
                    series : [
                        {
                            values : [571.0],
                            text: "Schedul Batch",
                          backgroundColor: '#50ADF5',
                        },
                        {
                          values: [364.0],
                          text: "Finished Batch",
                          backgroundColor: '#FF7965'
                        }
                    ]
                };

HTML

    <div zingchart id="p1chart" zc-json="mybatchChart" zc-width="99%" zc-height="99%" ng-show="graph6" ></div>

【问题讨论】：

标签： angularjs zingchart

【解决方案1】：

我无法重现您的问题，也许您在使用变量之前没有定义变量 (ANIMATION_BY_PLOT & ANIMATION_FAST)...

以下是工作代码：

angular.module('myApp', ['zingchart-angularjs']).controller('myCtrlr', function($scope) {
  var ANIMATION_BY_PLOT = 1;
  var ANIMATION_FAST = 500;

  $scope.myConfig = {
    type: "pie",
    backgroundColor: "#FFFFFF",
    plot: {
      borderColor: "#FFFFFF",
      borderWidth: 5,
      // slice: 90,
      valueBox: {
        placement: 'out',
        text: '%t\n%npv%',
        fontFamily: "Open Sans"
      },
      tooltip: {
        fontSize: '18',
        fontFamily: "Open Sans",
        padding: "5 10",
        text: "%npv%"
      },
      animation: {
        effect: 2,
        method: 5,
        speed: ANIMATION_FAST,
        sequence: ANIMATION_BY_PLOT
      }
    },
    source: {
      text: 'gs.statcounter.com',
      fontColor: "#8e99a9",
      fontFamily: "Open Sans"
    },
    title: {
      fontColor: "#fff",
      text: 'Demo for minh',
      align: "left",
      offsetX: 10,
      fontFamily: "Open Sans",
      fontSize: 25
    },
    subtitle: {
      offsetX: 10,
      offsetY: 10,
      fontColor: "#8e99a9",
      fontFamily: "Open Sans",
      fontSize: "10",
      align: "left"
    },
    plotarea: {
      margin: "20 0 0 0"
    },
    series: [{
        values: [571.0],
        text: "Schedul Batch",
        backgroundColor: '#50ADF5',
      },
      {
        values: [364.0],
        text: "Finished Batch",
        backgroundColor: '#FF7965'
      }
    ]
  };


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="http://cdn.zingchart.com/angular/zingchart-angularjs.js"></script>

<body ng-app="myApp">
  <div ng-controller='myCtrlr'>
    <zingchart id="myPieChart" zc-json="myConfig" zc-height=500 zc-width=600></zingchart>
  </div>
</body>

【讨论】：