使用Chart.js实现数据可视化

2014-05-22

Chart.js是一个基于HTML5的canvas实现的数据可视化工具,可以可视化折线图(line chart)、柱状图(bar chart)、雷达图(radar chart)、饼图(pie chart)、极地区域图(polar area chart)、环形图(doughnut chart),官网是http://www.chartjs.org/。其源代码不多,很值得看一看。官方文档也很完善。

下面是一个官方的的示例(我稍微整理了一下):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="./Chart.min.js"></script>
    </head>
    <body>
        <canvas id="myChart" width="400" height="300">你使用IE?</canvas>
        <script type="text/javascript">
            //Get the context of the canvas element we want to select
            var ctx = document.getElementById("myChart").getContext("2d");
            var data = {
                labels : ["一月","二月","三月","四月","五月","六月","七月"],
                datasets : [
                    {
                        fillColor : "rgba(220,220,220,0.5)",
                        strokeColor : "rgba(220,220,220,1)",
                        pointColor : "rgba(220,220,220,1)",
                        pointStrokeColor : "#fff",
                        data : [65,59,90,81,56,55,40]
                    },
                    {
                        fillColor : "rgba(151,187,205,0.2)",
                        strokeColor : "rgba(151,187,205,1)",
                        pointColor : "rgba(151,187,205,1)",
                        pointStrokeColor : "#fff",
                        data : [28,48,40,19,96,27,100]
                    }
                ]
            }
            var myNewChart = new Chart(ctx).Line(data);
        </script>
    </body>
</html>

保存为index.html,浏览器打开后效果图如下:

( 完 )