Chart.js is a simple, object-oriented library of charting tools for designers and developers.
Based on HTML5 canvas technology, supports all modern browsers and provides a downgrade alternative for IE7/8.
Does not depend on any external tool library, is lightweight (only 4.5k after compression), and provides a method for loading external parameters.
One: quick use of chart.js
When learning chart.js, I Baidu a lot of information, although some blogs are very detailed, but they do not conform to my logic of thinking, what I see is cloudy and foggy. In the end, I chose the official documentation, looked at the differences between each chart, summed up the common ones, and found the differences. (Although it is an English document, I can still understand what it means.)
The following shows: how to use chart.js simply and quickly, a way to build charts.
Two: Steps to draw a chart
A: Import Chart.min.js file
<script src="js/Chart.min.js"></script>
B:Html create canvas
<div class="chart-container" style="margin-left: 50px; height:400px; width:500px">
<canvas id="myChart" height="400px" width="400px"></canvas>
</div>
Add a box to the canvas to limit the size of the canvas. If there is no limit, the canvas will fill the nearest parent element
The types of charts are: pie chart, line chart, column chart, ring chart, polar map, radar chart
C: draw on the canvas
<script type="text/javascript">
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'pie', //specify the type of the table
data: data //Data passed into the table
//options:options default parameters for options chart optional parameters
});
</script>
Three: Parameters of various charts
First of all, make it clear: drawing a chart requires three parameters ① specify the type of chart ② data ③ default setting of option (optional, that is, optional)
Pie and Donut Charts
// For a pie chart
var myPieChart = new Chart(ctx,{
type: 'pie',
date: date,
options: options
});
// And for a doughnut chart
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
date: date,
options: options
});
Data Structure()
The content of the data data: lab (the name of each item) and datasets
data = {
datasets: [{
data: [10, 20, 30]
}],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: [
'Red',
'Yellow',
'Blue'
]
};
Data Structure部分是每种图表共有的，包含lab和datasets。区别在于datasets可以设置的内容不同。
下面每种图表只针对如何创建和Dataset Properties的独有属性进行展示。
Dataset Properties（datasets的属性：除了data数据外，其它都是可选属性）
每种属性都是简单的英文，我就不做翻译了。（如果看不懂可以去官方网站，看文档，然后用有道等工具翻译理解）
饼状图实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/Chart.js"></script>
</head>
<body>
<div style="height: 400px;width: 400px;">
<canvas height="400px" width="400px" id="myChart">
</canvas>
<script type="text/javascript">
// 设置参数
var data = {
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [{
data: [300, 60, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'pie', //指定表的类型
data: data //传入表的数据
});
</script>
</div>
</body>
</html>
Defualt-Optios不做详细列出。
柱状图/条形图
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
Dataset Properties
极地图
new Chart(ctx, {
data: data,
type: 'polarArea',
options: options
});
Dataset Properties
折线图
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
Dataset Properties
雷达图
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data,
options: options
});
Dataset Properties
气泡图
// For a bubble chartvar myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: options
});
Dataset Properties
Dataset Properties
