Chart.js是一个功能强大的数据可视化库，但是我从经验中知道，开始并获取要显示的图形可能很棘手。各种各样的事情都可能出错，而我通常只是想让某些事情起作用，所以我可以开始进行调整。
这是一个包含10种工作图（条形图，饼图，折线图等）的列表，其中设置了颜色和数据以呈现美观的图表，您可以将其复制并粘贴到自己的项目中，并快速进行自定义和进行微调以使其适合您的风格和目的。
要使用这些示例，请确保还包括Chart.js：
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
1.条形图
通过将设置type为bar来创建条形图（要翻转条形的方向，请设置type为horizontalBar）。通过将一种颜色传递给backgroundColor（所有条形将具有相同的颜色）或一组颜色来设置条形的颜色。
如果要传递数组（如下面的示例所示），则将颜色分配给标签和编号，它们在各自的数组中共享相同的索引。即，下面，“非洲”是第一个标签，将被设置为#3e95cd（第一个颜色）和2478（第一个数字）。
条形图HTML和JavaScript
<canvas id="bar-chart" width="800" height="450"></canvas>
// Bar chart
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
2.折线图
设置type为可以创建折线图line。默认情况下，线条带有深色透明填充，覆盖线条和x轴之间的区域。我认为这些填充往往会混淆其他行，因此在此示例（fill: false）中，我已在每个数据集上将其删除。
如果要删除所有折线图的填充，则实现相同效果的更有效方法是更改填充的全局默认值：Chart.defaults.global.elements.line.fill = false;。
折线图：HTML和JavaScript
<canvas id="line-chart" width="800" height="450"></canvas>
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
data: [86,114,106,106,107,111,133,221,783,2478],
label: "Africa",
borderColor: "#3e95cd",
fill: false
}, {
data: [282,350,411,502,635,809,947,1402,3700,5267],
label: "Asia",
borderColor: "#8e5ea2",
fill: false
}, {
data: [168,170,178,190,203,276,408,547,675,734],
label: "Europe",
borderColor: "#3cba9f",
fill: false
}, {
data: [40,20,10,16,24,38,74,167,508,784],
label: "Latin America",
borderColor: "#e8c3b9",
fill: false
}, {
data: [6,3,2,2,7,26,82,172,312,433],
label: "North America",
borderColor: "#c45850",
fill: false
}
]
},
options: {
title: {
display: true,
text: 'World population per region (in millions)'
}
}
});
3.饼图
设置type为可以创建饼图pie。它们几乎与甜甜圈图完全相同，并且可以使用相同的配置（部分是更改类型）。
饼图：HTML和JavaScript
<canvas id="pie-chart" width="800" height="450"></canvas>
new Chart(document.getElementById("pie-chart"), {
type: 'pie',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}]
},
options: {
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
4.雷达图
通过设置type为来创建雷达图（也称为网络图，蜘蛛图，星形图）radar。雷达图通常需要比其他图表更多的垂直空间才能清晰显示，因此您可能需要调整图表比例。
雷达图：HTML和JavaScript
<canvas id="radar-chart" width="800" height="600"></canvas>
new Chart(document.getElementById("radar-chart"), {
type: 'radar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "1950",
fill: true,
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointBackgroundColor: "rgba(179,181,198,1)",
data: [8.77,55.61,21.69,6.62,6.82]
}, {
label: "2050",
fill: true,
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
data: [25.48,54.16,7.61,8.06,4.45]
}
]
},
options: {
title: {
display: true,
text: 'Distribution in % of world population'
}
}
});
5.极地面积图
通过设置type为来创建极地面积图polarArea。极区图与饼图密切相关，不同之处在于，除了表示数据点相对大小的角度外，每个元素的半径都与值相对应。
极坐标图：HTML和JavaScript
<canvas id="polar-chart" width="800" height="450"></canvas>
new Chart(document.getElementById("polar-chart"), {
type: 'polarArea',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
},
options: {
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
6.甜甜圈图
将设置type为可以创建甜甜圈图doughnut。它们几乎与饼图相同，并且将使用相同的配置。
甜甜圈图：HTML和JavaScript
<canvas id="doughnut-chart" width="800" height="450"></canvas>
new Chart(document.getElementById("doughnut-chart"), {
type: 'doughnut',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
},
options: {
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
7.水平条形图
设置type为可以创建水平条形图horizontalBar。它们在其他方面与常规条形图相同，并且将在相同的配置下工作。
水平条形图：HTML和JavaScript
<canvas id="bar-chart-horizontal" width="800" height="450"></canvas>
new Chart(document.getElementById("bar-chart-horizontal"), {
type: 'horizontalBar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
8.分组条形图
分组条形图并不是每个人都说独特的图表类型，但是与到目前为止我们看到的条形图相比，它要求您设置数据的方式有所不同。
type仍设置为bar，但是一旦将多个对象传递给datasets，Chart.js就会为每个对象创建一组新的条形图。然后通过将颜色传递给来设置该组条的颜色backgroundColor。
分组条形图：HTML和JavaScript
<canvas id="bar-chart-grouped" width="800" height="450"></canvas>
new Chart(document.getElementById("bar-chart-grouped"), {
type: 'bar',
data: {
labels: ["1900", "1950", "1999", "2050"],
datasets: [
{
label: "Africa",
backgroundColor: "#3e95cd",
data: [133,221,783,2478]
}, {
label: "Europe",
backgroundColor: "#8e5ea2",
data: [408,547,675,734]
}
]
},
options: {
title: {
display: true,
text: 'Population growth (millions)'
}
}
});
9.混合图
您可以混合多个图表，并将它们彼此叠加。这是通过将设置type为bar（而不是例如-mixed或line必须是bar），然后为数据集数组中的每个数据集对象设置钢筋类型来完成的。
例如，要生成上面的图，我们有四个数据对象：两个设置为bar，两个设置为line，而typeChart对象的设置为bar。
混合图表：HTML和JavaScript
<canvas id="mixed-chart" width="800" height="450"></canvas>
new Chart(document.getElementById("mixed-chart"), {
type: 'bar',
data: {
labels: ["1900", "1950", "1999", "2050"],
datasets: [{
label: "Europe",
type: "line",
borderColor: "#8e5ea2",
data: [408,547,675,734],
fill: false
}, {
label: "Africa",
type: "line",
borderColor: "#3e95cd",
data: [133,221,783,2478],
fill: false
}, {
label: "Europe",
type: "bar",
backgroundColor: "rgba(0,0,0,0.2)",
data: [408,547,675,734],
}, {
label: "Africa",
type: "bar",
backgroundColor: "rgba(0,0,0,0.2)",
backgroundColorHover: "#3e95cd",
data: [133,221,783,2478]
}
]
},
options: {
title: {
display: true,
text: 'Population growth (millions): Europe & Africa'
},
legend: { display: false }
}
});
10.气泡图
最后但并非最不重要的是，气泡图是Hans Rosling的最爱。气泡图可以很好地同时可视化许多不同的数据点。在此示例中，每个泡沫由三个值组成：x位置，y位置和大小（r）-分别显示每个国家的GDP，幸福感和人口。
在上面的示例中，我使用的是世界幸福报告中的幸福指数来表示一个国家的Y位置，使用国际货币基金组织的GDP估算来设置X位置，并使用人口规模来设置泡沫的大小。（请注意，我已删除了示例代码中的某些数据，以减少必须复制的代码量。）
您可以向每个数据集对象中的每个数组传递几个对象（设置x，y和x）data（每个对象将创建一个新的气泡），但是在本示例中，我希望每个数组仅使用一个对象，因为我希望每个气泡都具有唯一的颜色和标签。
气泡图：HTML和JavaScript
<canvas id="bubble-chart" width="800" height="800"></canvas>
new Chart(document.getElementById("bubble-chart"), {
type: 'bubble',
data: {
labels: "Africa",
datasets: [
{
label: ["China"],
backgroundColor: "rgba(255,221,50,0.2)",
borderColor: "rgba(255,221,50,1)",
data: [{
x: 21269017,
y: 5.245,
r: 15
}]
}, {
label: ["Denmark"],
backgroundColor: "rgba(60,186,159,0.2)",
borderColor: "rgba(60,186,159,1)",
data: [{
x: 258702,
y: 7.526,
r: 10
}]
}, {
label: ["Germany"],
backgroundColor: "rgba(0,0,0,0.2)",
borderColor: "#000",
data: [{
x: 3979083,
y: 6.994,
r: 15
}]
}, {
label: ["Japan"],
backgroundColor: "rgba(193,46,12,0.2)",
borderColor: "rgba(193,46,12,1)",
data: [{
x: 4931877,
y: 5.921,
r: 15
}]
}
]
},
options: {
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}, scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: "Happiness"
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: "GDP (PPP)"
}
}]
}
}
});
我希望您能够启动您的过程并迅速开始使用这些模板图。Chart.js是高度可定制的，因此，如果您要更改图形的设计，我建议您深入研究官方文档以探索所有可以调整的参数。
扫一扫
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
