chart.js图表库案例赏析，饼图添加文字

Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型（折线图，条形图，雷达图，饼图，柱状图和极地区域区）。而且，这是一个独立的包，不依赖第三方 JavaScript 库，小于 5KB。

前天用了一下，由于以前也稍微用过，今天总结了一下（水平有限，如果问题，请不吝赐教）：

开发中文文档：http://www.bootcss.com/p/chart.js/docs/

chart.js下载：

把所有的图标全都写了一遍，并把所有的可控属性（颜色等）均已随机数出现，大小自己控制；

这是所有的代码，只有一个Chart.js外部文件，引来即用：

<!doctype html>
<html>
<head>
    <title>Chart</title>
    <mate charset="utf-8"></mate>
    <script src="Chart.js"></script>
</head>
<body>


<div style="width:50%;margin: 0px auto;">

    <!--柱状图开始-->
    <div>
        <h1>柱状图（Bar chart）</h1>
        <canvas id="canvas-bar" height="450" width="600"></canvas>
    </div>

    <script>
        var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
        var randomScalingFactor_255 = function(){ return Math.round(Math.random()*255)};
        var radom_color = function(){
            return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
        }
        var barChartData = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    fillColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.5)",
                    strokeColor : "rgba(" + randomScalingFactor_255()+","+ randomScalingFactor_255()+"," + randomScalingFactor_255() + ",0.8)",
                    highlightFill: "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.75)",
                    highlightStroke: "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                },
                {
                    fillColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.5)",
                    strokeColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.8)",
                    highlightFill : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.75)",
                    highlightStroke : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                }
            ]

        }
        var ctx = document.getElementById("canvas-bar").getContext("2d");
        window.myBar = new Chart(ctx).Bar(barChartData, {
            responsive : true
        });
    </script>
    <!--柱状图结束-->

    <!--曲线图（Line chart）开始-->
    <div>
        <h1>曲线图（Line chart）</h1>
        <canvas id="canvas-line" height="450" width="600"></canvas>
    </div>
    <script>
        var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
        var lineChartData = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    label: "My First dataset",
                    fillColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.2)",
                    strokeColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    pointColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    pointStrokeColor : radom_color(),
                    pointHighlightFill :  radom_color(),
                    pointHighlightStroke : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                },
                {
                    label: "My Second dataset",
                    fillColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.2)",
                    strokeColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    pointColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    pointStrokeColor : radom_color(),
                    pointHighlightFill :  radom_color(),
                    pointHighlightStroke : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                },
                {
                    label: "My First dataset",
                    fillColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.3)",
                    strokeColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    pointColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    pointStrokeColor : '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),
                    pointHighlightFill : '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),
                    pointHighlightStroke : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                }
            ]

        }
            var ctx = document.getElementById("canvas-line").getContext("2d");
            window.myLine = new Chart(ctx).Line(lineChartData, {
                responsive: true
            })
    </script>

    <!--曲线图（Line chart）结束-->

    <!--雷达图或蛛网图（Radar chart）开始-->
    <div>
        <h1>雷达图或蛛网图（Radar chart）</h1>
        <canvas id="canvas-radar" height="450" width="600"></canvas>
    </div>
    <script>
        var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
        var radarData = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    label: "My First dataset",
                    fillColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.2)",
                    strokeColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    pointColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    pointStrokeColor : '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),
                    pointHighlightFill : '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),
                    pointHighlightStroke : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                },
                {
                    label: "My Second dataset",
                    fillColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",0.2)",
                    strokeColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    pointColor : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    pointStrokeColor : '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),
                    pointHighlightFill : '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),
                    pointHighlightStroke : "rgba(" + randomScalingFactor_255() + "," + randomScalingFactor_255() + "," + randomScalingFactor_255() + ",1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                },

            ]

        }
        var ctx = document.getElementById("canvas-radar").getContext("2d");
        window.myLine = new Chart(ctx).Radar(radarData, {
            responsive: true
        })
    </script>
    <!--雷达图或蛛网图（Radar chart）结束-->

    <!--极地区域图（Polar area chart）开始-->
    <div>
        <h1>极地区域图（Polar area chart）</h1>
        <canvas id="canvas-polar" height="450" width="600"></canvas>
    </div>
    <script>
        var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
        var polarData = [
            {
                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"
            }

        ];
        var ctx = document.getElementById("canvas-polar").getContext("2d");
        window.myLine = new Chart(ctx).PolarArea(polarData, {
            responsive: true
        })
    </script>
    <!--极地区域图（Polar area chart）结束-->

    <!--饼图（Pie chart）开始-->
    <div>
        <h1>饼图（Pie chart）</h1>
        <canvas id="chart-pie" width="450" height="450"/>
    </div>
    <script>

        var pieData = [
            {
                value: 300,
                color: radom_color(),
                highlight:  radom_color(),
                label: "Red"

            },
            {
                value: 200,
                color:  radom_color(),
                highlight:  radom_color(),
                label: "Green"
            },
            {
                value: 100,
                color:  radom_color(),
                highlight:  radom_color(),
                label: "Yellow"
            },
            {
                value: 400,
                color:  radom_color(),
                highlight:  radom_color(),
                label: "Grey"
            },
            {
                value: 120,
                color:  radom_color(),
                highlight:  radom_color(),
                label: "Dark Grey"
            }
        ];
            var ctx = document.getElementById("chart-pie").getContext("2d");
            window.myPie = new Chart(ctx).Pie(pieData);
    </script>

    <!--饼图（Pie chart）结束-->
    <!--环形图（Doughnut chart）开始-->
    <div style="width: 600px;height:600px;">
        <h1>环形图（Doughnut chart）</h1>
        <canvas id="chart-Doughnut" width="300" height="300"/>
    </div>
    <script>
        var doughnutData = [
            {
                value: 1,
                label: "One",
                color:radom_color()
            },
            {
                value: 2,
                label: "Two",
                color:radom_color()
            },
            {
                value: 3,
                label: "Three",
                color:radom_color()
            },
            {
                value: 4,
                label: "Four",
                color:radom_color()
            },
            {
                value: 5,
                label: "Five",
                color:radom_color()
            }

        ];

            var ctx = document.getElementById("chart-Doughnut").getContext("2d");
            window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
    </script>
    <!--环形图（Doughnut chart）结束-->


</div>

</body>
</html>

项目需要在饼图上写字（最后没用），找到了一个高手改过源码之后的文件：http://download.csdn.net/detail/renfufei/7102809

具体做法：

饼状图,添加文字
1. 修改的是 Chart.js,大致在 772行编码,也可以搜索 renfufei@qq.com
2. 示例是 samples/pie.html,使用的是 UTF-8编码

--
var pieData = [
{
value: 30,
color:"#F38630"
,text: "男生"
},
{
value : 50,
color : "#E0E4CC"
,text: "女生"
},
{
value : 100,
color : "#69D2E7"
,text: "男人"
}

];
--

chart.js可以完成功能，但是对于项目中的特殊需求并不能很好的实现~

posted @ 2015-10-24 16:37 siwenyu 阅读(23983) 评论(1) 编辑收藏举报

刷新页面返回顶部

siwenyu

活着

chart.js图表库案例赏析，饼图添加文字

公告