Как получить анимированные графики в жидкой манере с zingchart? - PullRequest
Новая
       12

Как получить анимированные графики в жидкой манере с zingchart?

0 голосов
/ 10 мая 2019

Я пытаюсь отобразить диаграммы с помощью тегов 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>

1 Ответ

0 голосов
/ 10 мая 2019

Мне не удалось воспроизвести вашу проблему, возможно, вы не определили переменные (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>
...