如何使用Zingchart以流畅的方式获得动画图表

我试图使用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: '%tn%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>

我无法重现您的问题，也许您在使用它们之前没有定义变量(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: '%tn%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>

相关内容

最新更新

热门标签：