图表显示数据，他们更容易来看待和快速传送数据，但他们并不总是很容易创建。
使用HTML5的canvas元素的图形绘制到页面上一个JavaScript插件。这是一个有据可查的插件，使得使用各种条形图，折线图，饼图等，非常方便。
来看看如何使用我们要创建一组3图chart.js ;显示买家的数量一个虚构的产品已超过6个月的过程中，这将是一个折线图，第二个将显示哪些国家的客户来自何方，这将是饼图，最后我们将使用一个条形图显示利润在此期间。
设置
我们需要做的第一件事是
复制Chart.min.js出解压缩文件夹，进入你会工作。然后创建一个新的HTML页面和导入脚本的目录：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8" />
<title>Chart.js demo</title>
<scriptsrc='Chart.min.js'></script>
</head>
<body>
</body>
</html>
绘制折线图
要绘制折线图，我们需要做的第一件事是创建在我们的HTML canvas元素在其中Chart.js可以得出我们的图表。所以它添加到我们的HTML页面的主体：
<canvasid="buyers"width="600"height="400"></canvas>
接下来，我们需要编写，将检索画布的背景下，所以它添加到你的身体元素脚下的脚本：
<script>
Login var buyers = document.getElementById('buyers').getContext('2d');new Chart(buyers).Line(buyerData);
</script>
里面的相同的脚本标签，我们需要建立我们的数据，在这种情况下它是一个对象，它包含了我们的图表和数据集来描述图表上的值的基础标签。
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]
}
]
}
如果你在浏览器中测试你的文件，你会看到现在一个很酷的动画线图。
绘制一个饼图
日线图上是完整的，所以让我们继续我们的饼图。首先，我们需要canvas元素：
<canvasid="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"
}
];
现在，马上pieData后，我们将添加我们的选择：
var pieOptions = {segmentShowStroke : false,
animateScale : true
}
这些选项做两件事情，第一，他们从各段中取出行程，然后他们动画饼的规模，使其缩小无中生有。
绘制条形图
最后，让我们来一个柱状图添加到我们的页面。令人高兴的语法条形图很相似，我们已经增加了折线图。首先，我们添加canvas元素：
<canvasid="income"width="600"height="400"></canvas>
接下来，我们获取的元素，并创建图形：
var income = document.getElementById("income").getContext("2d");new Chart(income).Bar(barData);
最后，我们添加在条形图的数据：
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]
}
]
}
正如你所看到的，大部分数据是一样的，只不过这次我们选择使用RGBA来指定我们的颜色，让我们来添加透明度。
结论
您可以查看
这一行动演示在这里，
如果你更喜欢复制和粘贴，这里是完整的脚本：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8" />
<title>Chart.js demo</title>
<!-- import plugin script -->
<scriptsrc='Chart.min.js'></script>
</head>
<body>
<!-- line chart canvas element -->
<canvasid="buyers"width="600"height="400"></canvas>
<!-- pie chart canvas element -->
<canvasid="countries"width="600"height="400"></canvas>
<!-- bar chart canvas element -->
<canvasid="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>
关于Chart.js伟大的事情是，它是使用简单，真的非常灵活。另外，一旦你在这里掌握了基本知识，你会发现，有许多选项本文档中列出。
ㅤ
hokurikustr
refrain
