Chart.js
Chart.js 是一个用于制作基于 HTML 的图表的免费 JavaScript 库。它是最简单的 JavaScript 可视化库之一，并带有以下内置图表类型：
- 散点图
- 折线图
- 条形图
- 饼形图
- 环形图
- 气泡图
- 面积图
- 雷达图
- 混合图
如何使用 Chart.js？
Chart.js 易于使用。
第一的，添加指向提供 CDN（内容分发网络）的链接：
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>
然后 ，添加<canvas>到您想要绘制图表的位置：
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
画布元素必须具有唯一的 ID。
就这样！
典型的散点图语法：
var myChart = new Chart("myChart", {
类型：“散射”，
数据： {}，
选项： {}
});
典型的折线图语法：
var myChart = new Chart("myChart", {
类型：“line”，
数据： {}，
选项： {}
});
典型的条形图语法：
var myChart = new Chart("myChart", {
类型：“bar”，
数据： {}，
选项： {}
});
散点图
房价与面积
源代码
var xyValues = [
{x:50, y:7}，
{x:60, y:8}，
{x:70, y:8}，
{x:80, y:9}，
{x:90, y:9}，
{x:100, y:9}，
{x:110, y:10}，
{x:120, y:11}，
{x:130, y:14}，
{x:140, y:14}，
{"x":150,"y":15}
];
新图表（“myChart”，{
类型：“散射”，
数据： {
数据集：[{
点半径：4，
点背景颜色：“rgba(0,0,255,1)”
数据：xyValues
}]
},
选项：{...}
});
亲自尝试 »
线图
房价与面积
源代码
var xValues = [50,60,70,80,90,100,110,120,130,140,150];
var yValues = [7,8,8,9,9,9,10,11,14,14,15];
新图表（“myChart”，{
类型：“line”，
数据： {
标签：xValues，
数据集：[{
背景颜色：“rgba(0,0,0,1.0)”，
边框颜色：“rgba(0,0,0,0.1)”
数据： yValues
}]
},
选项：{...}
});
亲自尝试 »
如果将 borderColor 设置为零，则可以 散点图 折线图：
边框颜色：“rgba(0,0,0,0)”，
亲自尝试 »
多行
源代码
var xValues = [100,200,300,400,500,600,700,800,900,1000];
新图表（“myChart”，{
类型：“line”，
数据： {
标签：xValues，
数据集：[{
数据：[860,1140,1060,1060,1070,1110,1330,2210,7830,2478]，
边框颜色：“红色”，
填充：false
},{
数据：[1600,1700,1700,1900,2000,2700,4000,5000,6000,7000]，
边框颜色：“绿色”，
填充：false
},{
数据：[300,700,2000,5000,6000,4000,2000,1000,200,100]，
边框颜色：“蓝色”，
填充：false
}]
},
选项： {
图例：{display: false}
}
});
线性图
源代码
var xValues = [];
var yValues = [];
生成数据(“x * 2 + 7”, 0, 10, 0.5);
新图表（“myChart”，{
类型：“line”，
数据： {
标签：xValues，
数据集：[{
填充：false，
点半径：1，
边框颜色："rgba(255,0,0,0.5)",
数据： yValues
}]
},
选项： {...}
});
函数生成数据（值，i1，i2，步长 = 1）{
对于（让 x = i1；x <= i2；x += 步骤）{
yValues.推（eval（值））；
x值.推（x）；
}
}
亲自尝试 »
函数图
条形图
源代码
var xValues = ["意大利", "法国", "西班牙", "美国", "阿根廷"];
var yValues = [55, 49, 44, 24, 15];
var barColors = ["红色","绿色","蓝色","橙色","棕色"];
新图表（“myChart”，{
类型：“bar”，
数据： {
标签：xValues，
数据集：[{
背景颜色：条形颜色，
数据： yValues
}]
},
选项： {...}
});
亲自尝试 »
颜色色调：
var barColors = [
“RGBA（0,0,255,1.0）”，
“rgba(0,0,255,0.8)”
“RGBA（0,0,255,0.6）”，
“RGBA（0,0,255,0.4）”，
“RGBA（0,0,255,0.2）”，
];
亲自尝试 »
饼状图
例子
新图表（“myChart”，{
类型：“饼图”，
数据： {
标签：xValues，
数据集：[{
背景颜色：条形颜色，
数据： yValues
}]
},
选项： {
标题： {
显示：真，
文本：“世界葡萄酒产量”
}
}
});
亲自尝试 »
