Chart.js入门：简介

最新推荐文章于 2024-10-03 19:26:59 发布

cunjie3951

最新推荐文章于 2024-10-03 19:26:59 发布

阅读量1.5k

点赞数

文章标签： python java 大数据 css 数据可视化

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

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

国名	人口
中国	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时，以上选项将隐藏插入符号。这是一个有效的演示，显示了正在使用的选项。尝试将鼠标悬停在栏上以查看自定义的工具提示。