Chart.js入门教程

Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。

 

相信大部分人都一样，看到一大筐用文本或者表格形式呈现的数据就头疼。因为这种呈现方式也太无聊了吧。。。而且这对于我们处理原始数据也造成一定的困难。

不信？我反手就是一个例子：

更进一步说，柱状图能够直观的显示出趋势或者事实。以这张表格为例，柱状图会直观地告诉你美国的人口是孟加拉的两倍，中国的人口是俄罗斯的10倍。你只需要看看柱状图的长度就可以得出这些信息。虽然这个表里只有10个国家，不出意料的话，我猜你大概也会直接忽略掉它。。。。正常情况下，人们只会看一两个他们感兴趣的国家。但是如果这张表被转换为柱状图的话，人们看一眼就会得到有关人口数量分布的大致信息。

那么本文的重点来了，你可以使用Chart.js来制作各种各样的图表。下面将为你全方位介绍chart.js。chart.js最与众不同之处是，它可以在HTML5 Canvas上面绘制出色的响应式图表。

Chart.js允许你把不同的图表类型混合在一起，然后在上面绘制日期、对数或自定义比例的数据。还可以在更改数据或更新颜色时应用运用框外动画。 

下面将教你安装chart.js，然后介绍配置选项和其他的方面。

 

安装和使用

 

你可以从GitHub里面下载最新版本的Chart.js或者在你的项目中使用CDN link。或者你也可以通过以下命令在npm或bower中来安装chart.js。

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

Chart.js有两种不同的版本。常规版本的Chart.js和 Chart.min.js，附带chart.js库的同时还带着颜色解析器。如果你想使用这个版本并且在你的图表中使用时间轴，你需要在安装Chart.js之前安装上Moment.js。

而另一个版本Chart.bundle.js 和Chart.bundle.min.js早就包含了Moment.js 。你唯一需要注意的就是两个版本只能安装一个，否则会引起错误。

一旦你决定好使用哪个版本之后，你就可以在你的项目中引入Chart.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。data键包含了要用到的所有数据。background键图表的背景色。默认值是'rgba(0,0,0,0.1)'。

每个图表都有自己的特定键，你可以用它们来控制图表的外观。这张图表是上面代码最终呈现效果。

 

如果你想让图表在所有的设备上都显示一样的尺寸，只需将responsive的值设为false。

 

配置选项

 

Chart.js库允许你个性化定制你的图表。例如，你可以改变上面图表的颜色和边框宽度。你还可以通过更改字体大小和颜色来修改工具提示栏和图例。在这个小节里面你将会学习到这些设置样式的键。

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键的控制，它的值 可以是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 键更改工具提示栏的背景  。

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上工作的"de facto" 语言之一。它不是没有它的学习曲线，它有很多框架和库等着你去学习。如果你正在寻找额外的资源来学习或在你的工作中使用，请查看我们在Envato marketplace中可用的内容。