10个Chart.js示例图表

男娘i 2023-10-05 14:14 49阅读 0赞

[Chart.js][]是一个功能强大的数据可视化库，但是我从经验中知道，开始并获取要显示的图形可能很棘手。各种各样的事情都可能出错，而我通常只是想让*某些事情*起作用，所以我可以开始进行调整。

这是一个包含10种工作图（条形图，饼图，折线图等）的列表，其中设置了颜色和数据以呈现美观的图表，您可以将其复制并粘贴到自己的项目中，并快速进行自定义和进行微调以使其适合您的风格和目的。

要使用这些示例，请确保还包括Chart.js：

1.条形图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70][]

通过将设置type为bar来创建条形图（要翻转条形的方向，请[设置type为horizontalBar][type_horizontalBar]）。通过将一种颜色传递给backgroundColor（所有条形将具有相同的颜色）或一组颜色来设置条形的颜色。

如果要传递数组（如下面的示例所示），则将颜色分配给标签和编号，它们在各自的数组中共享相同的索引。即，下面，“非洲”是第一个标签，将被设置为\#3e95cd（第一个颜色）和2478（第一个数字）。

**条形图****HTML****和****JavaScript**

*// 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.折线图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 1][]

设置type为可以创建折线图line。默认情况下，线条带有深色透明填充，覆盖线条和x轴之间的区域。我认为这些填充往往会混淆其他行，因此在此示例（fill: false）中，我已在每个数据集上将其删除。

如果要删除所有折线图的填充，则实现相同效果的更有效方法是更改填充的全局默认值：Chart.defaults.global.elements.line.fill = false;。

**折线图：****HTML****和****JavaScript**

**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.饼图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 2][]

设置type为可以创建饼图pie。它们几乎与[甜甜圈图][Link 1]完全相同，并且可以使用相同的配置（部分是更改类型）。

**饼图：****HTML****和****JavaScript**

**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.雷达图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 3][]

通过设置type为来创建雷达图（也称为网络图，蜘蛛图，星形图）radar。雷达图通常需要比其他图表更多的垂直空间才能清晰显示，因此您可能需要调整图表比例。

**雷达图：****HTML****和****JavaScript**

**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.极地面积图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 4][]

通过设置type为来创建极地面积图polarArea。极区图与饼图密切相关，不同之处在于，除了表示数据点相对大小的角度外，每个元素的半径都与值相对应。

**极坐标图：****HTML****和****JavaScript**

**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.甜甜圈图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 5][]

将设置type为可以创建甜甜圈图doughnut。它们几乎与[饼图][Link 2]相同，并且将使用相同的配置。

**甜甜圈图：****HTML****和****JavaScript**

**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.水平条形图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 6][]

设置type为可以创建水平条形图horizontalBar。它们在其他方面与常规条形图相同，并且将在相同的配置下工作。

**水平条形图：****HTML****和****JavaScript**

**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.分组条形图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 7][]

分组条形图并不是每个人都说独特的图表类型，但是与到目前为止我们看到的条形图相比，它要求您设置数据的方式有所不同。

type仍设置为bar，但是一旦将多个对象传递给datasets，Chart.js就会为每个对象创建一组新的条形图。然后通过将颜色传递给来设置该组条的颜色backgroundColor。

**分组条形图：****HTML****和****JavaScript**

**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.混合图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 8][]

您可以混合多个图表，并将它们彼此叠加。这是通过将设置type为bar（**而不是**例如\-mixed或line必须是bar），然后为数据集数组中的每个数据集对象设置钢筋类型来完成的。

例如，要生成上面的图，我们有四个数据对象：两个设置为bar，两个设置为line，而typeChart对象的设置为bar。

**混合图表：****HTML****和****JavaScript**

**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.气泡图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 9][]

最后但并非最不重要的是，气泡图是[Hans Rosling][]的最爱。气泡图可以很好地同时可视化许多不同的数据点。在此示例中，每个泡沫由三个值组成：x位置，y位置和大小（r）\-分别显示每个国家的GDP，幸福感和人口。

在上面的示例中，我使用的是[世界幸福报告中][Link 3]的幸福指数来表示一个国家的Y位置，使用[国际货币基金组织的][Link 4]GDP估算来设置X位置，并使用人口规模来设置泡沫的大小。（请注意，我已删除了示例代码中的某些数据，以减少必须复制的代码量。）

您可以向每个数据集对象中的每个数组传递几个对象（设置x，y和x）data（每个对象将创建一个新的气泡），但是在本示例中，我希望每个数组仅使用一个对象，因为我希望每个气泡都具有唯一的颜色和标签。

**气泡图：****HTML****和****JavaScript**

**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是高度可定制的，因此，如果您要更改图形的设计，我建议您深入研究[官方文档][Link 5]以探索所有可以调整的参数。

[Chart.js]: http://www.chartjs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201123135726121.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[type_horizontalBar]: https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/#horizontal-bar-chart
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201123135816590.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020112313590110.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[Link 1]: https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/#doughnut-chart
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201123135921959.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201123140011131.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201123140029418.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[Link 2]: https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/#pie-chart
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201123140052703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201123140113723.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201123140131888.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201123140150426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[Hans Rosling]: https://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen
[Link 3]: http://worldhappiness.report/wp-content/uploads/sites/2/2016/03/HR-V1Ch2_web.pdf
[Link 4]: http://bit.ly/2dcX425
[Link 5]: http://www.chartjs.org/docs/