使用chart.js轻松创建惊人的动画香港跑狗图

Sara Vieira. 经过 Sara Vieira.  |  2013年11月04日

香港跑狗图对于在视觉上显示数据而不是表格,并且具有添加的益处,即没有人将它们作为布局工具使用。他们’更轻松地快速地查看并传达数据,但它们’没有总是容易创造。

使用香港跑狗图开始的好方法是 Chart.js, 使用HTML5的JavaScript插件’S CANVAS元素将图形绘制到页面上。它’S一种记录的插件,可以使用各种条形图,线条香港跑狗图,饼图等等,令人难以置信的简单。

要查看如何使用Chart.js’重新创建一组3个香港跑狗图;一个将展示一个虚构产品在6个月内有一个虚构产品的数量,这将是一条线条图;第二个将显示客户来自哪些国家,这将是饼图;终于我们’LL使用条形图显示利润在此期间。

 

配置

我们需要做的第一件事是 下载香港跑狗图。将Chart.Min.js复制出解压缩的文件夹,然后进入您的目录’LL正在工作。然后创建一个新的HTML页面并导入脚本:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Chart.js demo</title>
        <script src='Chart.min.js'></script>
    </head>
    <body>
    </body>
</html>

 

绘制一条线图

要绘制划线图,我们需要做的第一件事是在我们的HTML中创建一个Canvas元素,其中Chart.js可以绘制我们的香港跑狗图。所以将其添加到我们的HTML页面中:

<canvas id="buyers" width="600" height="400"></canvas>

接下来,我们需要编写一个脚本,它将检索画布的上下文,因此将其添加到正文元素的脚部:

<script>
    var buyers = document.getElementById('buyers').getContext('2d');
    new Chart(buyers).Line(buyerData);
</script>

(我们实际上可以通过该选项通过一些选择 线 method, but we’重新将数据粘在现在以保持简单。)

在此实例中,我们需要创建数据的相同脚本标记’■包含我们香港跑狗图和数据集基数的标签,以描述香港跑狗图上的值。将此添加到开始的行之上‘var buyers=’:

var buyerData = {
	labels : ["January","February","March","April","May","June"],
	datasets : [
		{
			fillColor : "rgba(172,194,132,0.4)",
			strokeColor : "#ACC26D",
			pointColor : "#fff",
			pointStrokeColor : "#9DB86D",
			data : [203,156,99,251,305,247]
		}
	]
}

如果在浏览器中测试您的文件’我现在看到一个很酷的动画线条图。

 

绘制饼图

我们的线条图已完成,所以让’S继续前进我们的饼图。首先,我们需要画布元素:

<canvas id="countries" width="600" height="400"></canvas>

接下来,我们需要获取上下文并实例化香港跑狗图:

var countries= document.getElementById("countries").getContext("2d");
new Chart(countries).Pie(pieData, pieOptions);

你’请注意,这次,我们将为香港跑狗图提供一些选项。

接下来我们需要创建数据。此数据与线条香港跑狗图有点不同,因为饼图更简单,我们只需要为每个部分提供值和颜色:

var pieData = [
	{
		value: 20,
		color:"#878BB6"
	},
	{
		value : 40,
		color : "#4ACAB4"
	},
	{
		value : 10,
		color : "#FF8153"
	},
	{
		value : 30,
		color : "#FFEA88"
	}
];

现在,Pieata之后立即我们’ll add our options:

var pieOptions = {
	segmentShowStroke : false,
	animateScale : true
}

这些选项做了两件事,首先他们从段中删除行程,然后它们为馅饼的比例设置动画,使其从一无所有。

 

绘制条形图

最后,让我们’s将条形图添加到我们的页面上。愉快地,条形图的语法与我们的界图非常相似’已经添加了。首先,我们添加Canvas元素:

<canvas id="income" width="600" height="400"></canvas>

接下来,我们检索元素并创建图形:

var income = document.getElementById("income").getContext("2d");
new Chart(income).Bar(barData);

最后,我们在条形图中添加’s data:

var barData = {
	labels : ["January","February","March","April","May","June"],
	datasets : [
		{
			fillColor : "#48A497",
			strokeColor : "#48A4D1",
			data : [456,479,324,569,702,600]
		},
		{
			fillColor : "rgba(73,188,170,0.4)",
			strokeColor : "rgba(72,174,209,0.4)",
			data : [364,504,605,400,345,320]
		}

	]
}

正如您所看到的,除此时,数据很大程度上是一样的’ve选择使用RGBA来指定我们的颜色,使我们能够添加透明度。

 

结论

你 can view a 这在此处的演示, 如果您更喜欢复制和粘贴,这是完整脚本:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Chart.js demo</title>
        <!-- import plugin script -->
        <script src='Chart.min.js'></script>
    </head>
    <body>
        <!-- line chart canvas element -->
        <canvas id="buyers" width="600" height="400"></canvas>
        <!-- pie chart canvas element -->
        <canvas id="countries" width="600" height="400"></canvas>
        <!-- bar chart canvas element -->
        <canvas id="income" width="600" height="400"></canvas>
        <script>
            // line chart data
            var buyerData = {
                labels : ["January","February","March","April","May","June"],
                datasets : [
                {
                    fillColor : "rgba(172,194,132,0.4)",
                    strokeColor : "#ACC26D",
                    pointColor : "#fff",
                    pointStrokeColor : "#9DB86D",
                    data : [203,156,99,251,305,247]
                }
            ]
            }
            // get line chart canvas
            var buyers = document.getElementById('buyers').getContext('2d');
            // draw line chart
            new Chart(buyers).Line(buyerData);
            // pie chart data
            var pieData = [
                {
                    value: 20,
                    color:"#878BB6"
                },
                {
                    value : 40,
                    color : "#4ACAB4"
                },
                {
                    value : 10,
                    color : "#FF8153"
                },
                {
                    value : 30,
                    color : "#FFEA88"
                }
            ];
            // pie chart options
            var pieOptions = {
                 segmentShowStroke : false,
                 animateScale : true
            }
            // get pie chart canvas
            var countries= document.getElementById("countries").getContext("2d");
            // draw pie chart
            new Chart(countries).Pie(pieData, pieOptions);
            // bar chart data
            var barData = {
                labels : ["January","February","March","April","May","June"],
                datasets : [
                    {
                        fillColor : "#48A497",
                        strokeColor : "#48A4D1",
                        data : [456,479,324,569,702,600]
                    },
                    {
                        fillColor : "rgba(73,188,170,0.4)",
                        strokeColor : "rgba(72,174,209,0.4)",
                        data : [364,504,605,400,345,320]
                    }
                ]
            }
            // get bar chart canvas
            var income = document.getElementById("income").getContext("2d");
            // draw bar chart
            new Chart(income).Bar(barData);
        </script>
    </body>
</html>

关于香港跑狗图的伟大事物是它’易于使用,非常灵活。加上,一旦你’你掌握了基础知识,你’LL发现有大量的选择 在文档中列出.

 

你用过香港跑狗图吗?你喜欢不同的解决方案吗?让我们在评论中知道。