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中可用的内容。