Chart.js入门：简介

人们通常不希望浏览大量以文本或表格形式呈现给他们的数据。大多数情况下，这是因为它很无聊，但更重要的是，处理原始数字要困难一些。

例如，这是世界上人口最多的十个国家的表格：

国名	人口
中国	1,379,302,771
印度	1,281,935,911
美国	326,625,791
印度尼西亚	260,580,739
巴西	207,353,391
巴基斯坦	204,924,861
奈及利亚	190,632,261
孟加拉国	157,826,578
俄国	142,257,519
日本	126,451,398

在此表中只有10个国家/地区，您和其他读者仍然很有可能会完全跳过该表。通常，人们只会看他们感兴趣的一两个国家。如果以条形图的形式提供相同的数据，那么某个人只需花费很少的时间就能大致了解这些国家的人口。

此外，找出趋势或事实将容易得多，例如，仅通过查看图表中的条形图，美国人口就将是孟加拉国的两倍，而中国的人口是俄罗斯的十倍左右。

可以用来创建各种图表的流行库是Chart.js 。在本系列中，您将学习该库的所有重要方面。它可用于在HTML5 Canvas上创建精美的响应式图表。

该库使您可以轻松混合不同的图表类型并按日期时间，对数或自定义比例绘制数据。该库还提供了开箱即用的动画，可在更改数据或更新颜色时应用这些动画。

让我们开始安装，然后继续配置选项和其他方面。

安装及使用

您可以从GitHub下载Chart.js的最新版本，也可以使用CDN链接将其包含在您的项目中。您还可以在以下命令的帮助下，使用npm或bower安装该库：

npm install chart.js --save
bower install chart.js --save

该库有两个不同的版本。名为Chart.js和Chart.min.js的普通版本带有Chart.js库和颜色解析器。如果要使用此版本的库并决定在图表中使用时间轴，则在使用Chart.js之前必须单独包含Moment.js库。

捆绑版本（标识为Chart.bundle.js或Chart.bundle.min.js ）已经包含Moment.js 。这样，您将不需要包括两个单独的文件。需要记住的一件事是，如果您已经在项目中包含Moment.js，则不要使用此版本。这可能会导致版本问题。

一旦确定了要使用的库版本，就可以将其包含在项目中并开始创建出色的图表。

<script src="path/to/Chart.min.js"></script><script>var barChart = new Chart({...})
</script>

创建图表

让我们用条形图表示引言中显示的人口表。 y轴将用于绘制人口图，x轴将用于绘制国家图。我们首先创建一个ID为popChart的画布。

<canvas id="popChart" width="600" height="400"></canvas>

宽度和高度用于确定图表的尺寸。创建响应式图表时，图表的纵横比由画布的宽度和高度确定。

接下来，您需要实例化Chart类。这可以通过传递要在其上绘制图表的节点，jQuery实例或画布的2d上下文来完成。

var popCanvas = $("#popChart");
var popCanvas = document.getElementById("popChart");
var popCanvas = document.getElementById("popChart").getContext("2d");

现在唯一要做的就是将所有参数传递给构造函数：

var barChart = new Chart(popCanvas, {type: 'bar',data: {labels: ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],datasets: [{label: 'Population',data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398],backgroundColor: ['rgba(255, 99, 132, 0.6)','rgba(54, 162, 235, 0.6)','rgba(255, 206, 86, 0.6)','rgba(75, 192, 192, 0.6)','rgba(153, 102, 255, 0.6)','rgba(255, 159, 64, 0.6)','rgba(255, 99, 132, 0.6)','rgba(54, 162, 235, 0.6)','rgba(255, 206, 86, 0.6)','rgba(75, 192, 192, 0.6)','rgba(153, 102, 255, 0.6)']}]}
});

在第二个参数中传递的对象包含Chart.js绘制图表所需的所有信息。 type键用于指定要绘制的图表的类型。它可以具有以下任意值： line ， bar ， radar ， polarArea ， pie ， doughnut和bubble 。您将在本系列中学习所有这些图表类型。

数据键包含要绘制的实际数据。 backgroundColor键用于指定图表中不同条形的颜色。如果未指定背景色，则使用默认值'rgba(0,0,0,0.1)' 。

每个图表还具有自己的特定键，可用于控制其外观。这是上面的代码创建的图表：

在上面的演示中，您可以将鼠标悬停在栏上以查看不同国家/地区的确切人口。还有一点需要注意的是，图表的大小不等于我们指定的尺寸，但是它的纵横比仍然相同。

如果要使图表在所有设备上具有相同的大小，则必须将responsive键的值设置为false 。

配置选项

Chart.js库使您可以自定义所创建图表的所有方面。例如，您可以更改上图中的条形边框的颜色和宽度。您还可以通过更改工具提示和图例的字体大小和颜色来修改它们。在本节中，您将学习用于设置这些元素样式的不同键。

该库具有四个特殊的全局键，可用于更改图表中的所有字体。这些键是defaultFontFamily ， defaultFontSize ， defaultFontStyle和defaultFontColor 。字体大小以像素为单位指定，不适用于radialLinear缩放点标签。同样， defaultFontStyle不适用于工具提示的标题或页脚。

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = 'blue';

下图使用上述全局字体设置。通过这种方式更改外观可以帮助您创建与网站样式匹配的图表。

您还可以修改图表中显示的图例。配置选项将需要传递到options.legend命名空间中。您还可以使用Chart.defaults.global.legend为所有图表全局指定图例选项。图例的position由position键控制，该键可以接受以下四个值之一： top ， left ， bottom和right 。您也可以使用display键显示或隐藏图例。

除了图例，您还可以控制图例标签的外观。使用label键将其配置选项设置在图例配置下方。可以使用boxWidth键指定颜色框的宽度。如果未指定任何值，则使用默认值40。

默认情况下，字体系列，字体大小，字体颜色和字体样式值是从全局配置继承的。但是，您可以使用fontSize ， fontStyle ， fontFamily和fontColor指定自己的值。

var barChart = new Chart(popCanvas, {type: 'bar',data: data,options: {legend: {display: true,position: 'bottom',labels: {boxWidth: 80,fontColor: 'rgb(60, 180, 100)'}}}
});

您可以使用options.tooltips命名空间控制在图表上局部绘制工具提示的方式。同样，可以使用Chart.defaults.global.tooltips全局设置工具提示的外观。要指定是否向用户显示工具提示，可以使用已enabled键。将其设置为false将禁用工具提示。此项的默认值为true 。

您还可以使用intersect键控制工具提示的显示/隐藏行为。设置为true （这也是此键的默认值）时，仅在鼠标指针实际与条互动时才显示工具提示。设置为false ，将根据mode键指定的行为显示工具提示。

mode键用于确定哪个元素显示在工具提示中。其默认值是nearest 。这意味着当将intersect设置为false ，将显示最接近鼠标指针的条的工具提示。

就像图例一样，您还可以控制工具提示的不同基于字体的属性的值。唯一的区别是，这一次必须分别为工具提示的标题，正文和页脚元素设置值。

例如，您可以使用bodyFontFamily ， bodyFontSize ， bodyFontStyle和bodyFontColor更改工具提示正文的字体属性。工具提示的标题和页脚还具有名为titleMarginBottom和footerMarginTop其他属性。它们可以用来在它们和工具提示的主体之间添加一些额外的空间。

同样，您可以使用xPadding和yPadding属性在工具提示的左侧/右侧和顶部/底部添加额外的填充。

您可以使用caretSize键控制工具提示箭头的大小。可以使用backgroundColor键更改工具提示的backgroundColor 。

var barChart = new Chart(popCanvas, {type: 'bar',data: data,options: {tooltips: {cornerRadius: 0,caretSize: 0,xPadding: 16,yPadding: 10,backgroundColor: 'rgba(0, 150, 100, 0.9)',titleFontStyle: 'normal',titleMarginBottom: 15}}
});

当caretSize设置为0时，以上选项将隐藏插入符号。这是一个有效的演示，显示了正在使用的选项。尝试将鼠标悬停在栏上以查看自定义的工具提示。

最后的想法

本教程提供了Chart.js库的基本介绍，并向您展示了如何使用它创建条形图。您还了解了可用于控制不同图表外观的不同配置选项。

尽管在本教程中我们仅使用条形图，但是配置选项可以应用于所有图表类型。在下一个教程中，您将更详细地了解折线图和条形图。

JavaScript已成为在Web上工作的事实语言之一。它并非没有学习曲线，并且有许多框架和库也让您忙碌。如果您正在寻找其他资源来学习或在工作中使用，请查看Envato市场中可用的资源。

如果您对本教程有任何疑问，请在评论中让我知道。

请注意，人口数据是从此人口普查信息中检索的。

翻译自: https://code.tutsplus.com/tutorials/getting-started-with-chartjs-introduction--cms-28278