V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
jjfat
V2EX  ›  JavaScript

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

  •  
  •   jjfat · 2015-07-21 12:49:08 +08:00 · 5635 次点击
    这是一个创建于 3420 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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

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

    6 条回复    2015-08-02 11:12:58 +08:00
    miyuki
        1
    miyuki  
       2015-07-21 15:27:48 +08:00
    tao1991123
        2
    tao1991123  
       2015-07-21 15:58:35 +08:00
    话说百度的 echarts项目更好用
    iyaozhen
        3
    iyaozhen  
       2015-07-21 16:00:30 +08:00
    前排安利 echarts
    lincanbin
        4
    lincanbin  
       2015-07-21 16:03:26 +08:00
    百度的Echarts非常好用,前几天才用过,特别爽
    http://www.94cb.com/statistics
    mengzhuo
        5
    mengzhuo  
       2015-07-21 23:19:28 +08:00
    都没听说过d3js?
    SilentDepth
        6
    SilentDepth  
       2015-08-02 11:12:58 +08:00
    强迫症表示浅灰色角探出去的那个尖儿让人担忧……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2582 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 03:18 · PVG 11:18 · LAX 19:18 · JFK 22:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.