如何使用Billboard JS做饼图加载动画

Question

I am using billboard js to develop a pie chart with animation. 我正在使用Billboard js开发带有动画的饼图。 I am unable to do the onload animation so, How will apply onload animation? 我无法执行onload动画，那么如何应用onload动画？

Here is the example of onload animation . 这是onload 动画的示例。 Please help us. 请帮助我们。

Here is my code in codepen 这是我在Codepen中的代码

HTML Code HTML代码

<div id="chart"></div>

JS code: JS代码：

bb.generate({
    "data": {
        "columns": [
            ["data1", 30],
            ["data2", 50]
        ],
        "type": "pie",
        "xLocaltime": true,
        "xSort": true
    },
    "legend": {
        "show": false
    },
    "clipPath": true,
    "gauge": {
        "width": 0,
        "startingAngle": 0,
        "expand": {
            "duration": 88
        }
    },
    "pie": {
        "label": {
            "threshold": 100
        }
    },
    "donut": {
        "label": {},
    },
    "tooltip": {
        "show": false,
        "grouped": false
    },
  interaction: {
    enabled: false
  }
});

Thanks! 谢谢！

Answer 1

The key point is initialize with '0' data and then load your final data. 关键点是使用“ 0”数据初始化，然后加载最终数据。

// (1) Initialize with 0
var chart = bb.generate({
    "data": {
        "columns": [
            ["data1", 0],
            ["data2", 0]
        ],
});

// (2) then load data via .load() api
chart.load( ... );

Try with the Run code snippet . 尝试使用“ Run code snippet 。

 var chart = bb.generate({ "data": { "columns": [ ["data1", 0], ["data2", 0] ], "type": "pie" }, "legend": { "show": false }, "pie": { "label": { show: false } }, interaction: { enabled: false } }); setTimeout(() => { chart.load({ "columns": [ ["data1", 30], ["data2", 50] ], }); }, 1000);

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>billboard.js</title> <script src="https://unpkg.com/billboard.js/dist/billboard.pkgd.min.js"></script> </head> <body> <div id="chart"></div> </body> </html>

如何使用Billboard JS做饼图加载动画

问题描述

1 个解决方案

解决方案1
0 2019-08-13 00:21:22

如何使用Billboard JS做饼图加载动画

问题描述

1 个解决方案

解决方案1 0 2019-08-13 00:21:22

解决方案1
0 2019-08-13 00:21:22