使用 chart.js 创建的动画效果饼图效果,支持手机哈~

2015-07-21 12:49:08 +08:00
 jjfat

chart.js类库可以帮助快速生成各种动态图形, 使用简单易用,以下代码可以生成相关饼图:

var pieData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}

];

window.onload = function(){
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx).Pie(pieData);
};

在线代码调试运行地址: http://dwz.cn/chartjs

扫扫二维码,手机上查看效果:

5509 次点击
所在节点    JavaScript
6 条回复
miyuki
2015-07-21 15:27:48 +08:00
tao1991123
2015-07-21 15:58:35 +08:00
话说百度的 echarts项目更好用
iyaozhen
2015-07-21 16:00:30 +08:00
前排安利 echarts
lincanbin
2015-07-21 16:03:26 +08:00
百度的Echarts非常好用,前几天才用过,特别爽
http://www.94cb.com/statistics
mengzhuo
2015-07-21 23:19:28 +08:00
都没听说过d3js?
SilentDepth
2015-08-02 11:12:58 +08:00
强迫症表示浅灰色角探出去的那个尖儿让人担忧……

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/207197

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX