使用Chart.js创建漂亮的图表

内容为王 。 我们都听过或读过这句话，表达了由于对搜索引擎的影响，好的文字可以如何推动转化。 但是，尽管文本对于搜索引擎而言非常出色，但有时人们可以通过查看图像或图表来更好地理解概念。 例如，如果您的网站专门研究调查，则关于调查的描述很重要，但是汇总调查数据的图表对您的用户而言则更为强大。

在本文中，我将向您介绍一个名为Chart.js的JavaScript库，该库使用HTML5 canvas元素在页面上绘制图表。 在简要概述了该库之后，我还将向您展示两个使用此库的示例。

什么是Chart.js？

Chart.js是一个JavaScript库，允许您使用HTML5 canvas元素绘制不同类型的图表。 由于它使用canvas ，因此您必须包含一个polyfill以支持较旧的浏览器。 作者建议的一个是ExplorerCanvas ，所以您可能要坚持使用它。

该库没有依赖项，并且它的重量非常低，因为在压缩，连接和压缩后，它的大小约为11kb。 但是，如果您不使用全部六种核心图表类型，则仅通过添加所需的模块就可以进一步减小大小。 因此，假设您只需要在网站上绘制条形图，就可以包含核心和条形模块，并为用户节省带宽。

Chart.js的另一个很酷的功能是图表具有响应能力，因此它们将根据可用空间进行调整。 最后，与您可以在网上找到的许多库不同，它提供了广泛而清晰的文档 ，使使用其基本功能和高级选项变得非常容易。

在下一节中，我们将介绍如何获取并将其包含在您的网站中。

Chart.js入门

使用此库的第一步是下载该库并将其包含在计划绘制一个或多个图表的页面中。 要下载Chart.js，您有两种可能。 首先是通过访问其GitHub存储库下载该库。 第二种可能性是通过运行以下命令来使用Web的依赖性管理器Bower：

bower install chartjs --save

下载后，您必须在页面中包含JavaScript文件。 在下一个示例中，我假设您要包括全包版本：

<script src="path/to/Chart.js"></script>

请注意文件的大写字母。 通常不会以首字母大写来编写库，因此，第一次使用它时，您可能很难理解为什么会出现404错误。

完成后，该库将通过名为Chart的全局变量提供其所有方法。 有了JavaScript文件，我们就可以创建第一个图表了。 为此，您需要通过将要在页面中使用的canvas的2d上下文传递给它来实例化一个新的Chart对象。 为了理解这个概念，假设您在页面中有以下元素将用于放置图表：

<canvas id="skills"></canvas>

如果要创建饼图，则必须编写以下语句：

var context = document.getElementById('skills').getContext('2d');
var skillsChart = new Chart(context).Pie(data);

其中data未在本实施例中所定义，是包含数据，以显示一个变量。

既然您知道了开始使用Chart.js所需的知识，现在该看一些示例了。 为了简洁起见，我将在示例中使用该库的全包版本，但是您可以在“ src”文件夹中找到所有模块。

使用Chart.js创建饼图

在本节中，我将向您展示如何创建一个饼图，以显示假设的开发人员的技能（我将包括Java，因此开发人员不能真正成为我！）。

您可能会很容易猜到，第一步是包括用于绘制饼图的canvas元素：

<canvas id="skills" width="300" height="300"></canvas>

然后，我们需要创建用于绘制图表的数据。 在实际情况下，数据是以某种方式从服务器提供的，但现在我们将使用固定示例，而不使用服务器。 对于饼图，我们必须传递一个对象数组，每个对象可以包含多个属性。 但是，为了一目了然地易于使用和易于理解，它应该为每个对象包含您要显示的值，饼图的颜色和标签，如下所示：

var pieData = [
   {
      value: 25,
      label: 'Java',
      color: '#811BD6'
   },
   {
      value: 10,
      label: 'Scala',
      color: '#9CBABA'
   },
   {
      value: 30,
      label: 'PHP',
      color: '#D18177'
   },
   {
      value : 35,
      label: 'HTML',
      color: '#6AE128'
   }
];

最后，如前一节所述，我们需要获取画布的2d上下文并实例化图表：

var context = document.getElementById('skills').getContext('2d');
var skillsChart = new Chart(context).Pie(pieData);

将本节中列出的所有代码段放在一起，将得到以下输出，也可以作为JSfiddle使用 ：

绘制条形图

我们将构建的下一个示例是条形图，以显示与某些国家/地区相比，2014年假设的公司的客户数量在2014年发生了变化。 正如我们在前面的示例中所做的那样，我们必须在要显示图表的页面中放置一个canvas元素：

<canvas id="clients" width="500" height="400"></canvas>

接下来，我们需要创建该假公司的数据：

var barData = {
    labels: ['Italy', 'UK', 'USA', 'Germany', 'France', 'Japan'],
    datasets: [
        {
            label: '2010 customers #',
            fillColor: '#382765',
            data: [2500, 1902, 1041, 610, 1245, 952]
        },
        {
            label: '2014 customers #',
            fillColor: '#7BC225',
            data: [3104, 1689, 1318, 589, 1199, 1436]
        }
    ]
};

如您所见，对于条形图，您必须提供一个对象，该对象包含名为labels的属性，该属性指定要比较的实例的名称。 在我们的示例中，这些实例是意大利，英国，美国，德国，法国和日本。 另外，我们必须提供一个dataset属性，该属性定义一个对象数组，每个对象都包含我们要比较的数据。 在我们的示例中，我们将比较2014年和2010年，因此我们仅需要两个对象。 在这些对象内部，我们必须指定标签以直观地提示数据的含义，每个对象的值（指定为data属性的值）以及栏的颜色（可选）。

完成后，我们准备创建图表：

var context = document.getElementById('clients').getContext('2d');
var clientsChart = new Chart(context).Bar(barData);

将本节中报告的所有片段汇总在一起，将得到以下输出，也可以作为JSfiddle使用 ：

结论

在本文中，我向您介绍了Chart.js，这是一个JavaScript库，可轻松创建漂亮的图表。 如您所见，该库非常简单，在本文中，我展示了一些示例。 Chart.js还为您提供了一些我没有介绍过的选项，但是您可以通过阅读官方文档来学习。

您曾经使用过该库吗？ 您的经历如何？ 如果没有，您是否使用了另一个？

From: https://www.sitepoint.com/creating-beautiful-charts-chart-js/