chart.min.js_Chart.js 2.0简介—六个简单示例

chart.min.js

This article is included in our anthology, Modern JavaScript. If you want everything in one place to get up to speed on modern JavaScript, sign up for SitePoint Premium and download yourself a copy.

本文包含在我们的选集Modern JavaScript中 。 如果您希望所有内容都集中在一个地方，以适应最新JavaScript，请注册SitePoint Premium并下载一个副本。

This article was peer reviewed by Tim Severien and Simon Codrington. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

本文由Tim Severien和Simon Codrington进行同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

If your website is data-intensive, then you will need to find a way to make that data easy to visualize. Humans, after all, are not wonderful at understanding long lists of raw numbers. That’s where charts and graphs come in — they can make complicated statistical relationships obvious and intuitive, as well as more accessibile to non-English speakers. Everyone understands basic charts at the same speed, the same can’t be said for paragraphs rife with technical jargon. Using charts when it’s beneficial, will make your website easier to understand and visually more appealing.

如果您的网站是数据密集型网站，那么您将需要找到一种使数据易于可视化的方法。 毕竟，人类在理解一长串原始数字方面并不出色。 这就是图表出现的地方-它们可以使复杂的统计关系变得明显和直观，并使非英语国家的用户更容易使用。 每个人都以相同的速度理解基本图表，对于用技术术语充斥的段落则不能这么说。 在有益的情况下使用图表将使您的网站更易于理解，并且在视觉上更具吸引力。

In this article I’ll introduce you to a JavaScript charting library called Chart.js. Using six stylish examples, I’ll demonstrate how you can use Chart.js to visualize data on your website, as well as configure it to meet your needs.

在本文中，我将向您介绍一个名为Chart.jsJavaScript图表库。 通过六个时尚的示例，我将演示如何使用Chart.js可视化网站上的数据，以及如何配置它以满足您的需求。

为什么选择Chart.js？ (Why Chart.js?)

I chose Chart.js because it can be learned and leveraged quickly. It’s designed with simplicity in mind, yet is extremely customizable. In my experience, charting libraries fall onto a spectrum of complexity, where more complex libraries offer deeper customization, but have steeper learning curves. Chart.js is one of the quickest and easiest libraries to learn that doesn’t heavily limit your options. It comes with eight different chart types that will cover almost all of your data visualization needs.

我选择Chart.js是因为可以快速学习和利用它。 它在设计时考虑了简单性，但可高度自定义。 以我的经验，图表库属于复杂性范围，其中更复杂的库提供了更深入的自定义功能，但学习曲线更陡峭。 Chart.js是学习最快，最简单的库之一，它不会严重限制您的选择。 它带有八种不同的图表类型，几乎可以满足您所有数据可视化需求。

Chart.js is actively maintained to a high standard by the open source community. It recently reached version 2.0, which came with a few fundamental syntax changes to make code more consistent, as well as offer mobile support. In this article, I’m going to use Chart.js 2.0 and it’s updated syntax. At the end of this article, after giving you a chance to see how Chart.js 2.0 works, there is a section covering the 1.0 -> 2.0 transition and what to expect when reading old Chart.js examples online.

开源社区积极地将Chart.js维持在高标准下。 它最近达到了2.0版，其中进行了一些基本语法更改，以使代码更加一致，并提供了移动支持。 在本文中，我将使用Chart.js 2.0及其更新的语法。 在本文的结尾，在使您有机会了解Chart.js 2.0的工作原理之后，有一节介绍了1.0-> 2.0过渡以及在线阅读旧Chart.js示例时的期望。

安装Chart.js (Installing Chart.js)

Again, Chart.js is focused on being easy. Easy to learn, easy to leverage, and easy to install. If you’d like to dive into the actual code, check out the GitHub project.

同样，Chart.js专注于轻松。 易于学习，易于利用和易于安装。 如果您想深入了解实际代码， 请查看GitHub project 。

You only need two things to use Chart.js.

使用Chart.js只需要两件事。

1) The library – for this guide, I recommend using a CDN because it’s the easiest way to get up and running fast.

1)库–对于本指南，我建议使用CDN，因为它是快速启动和运行的最简单方法。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

2) A <canvas> element, as Chart.js leverages HTML5 canvas.

2) <canvas>元素，因为Chart.js利用HTML5画布。

</canvas><canvas id="myChart"></canvas>

Alternatively, you can use a package manager to download the library. For more information, see the Getting Started guide.

或者，您可以使用程序包管理器来下载库。 有关更多信息，请参见《 入门指南》。

Simple, eh? Now without further ado, let’s look at what Chart.js has to offer.

简单吧？ 现在，不用多说了，让我们看看Chart.js提供了什么。

折线图 (Line Chart)

This is all you need to create a minimum line chart in Chart.js. Just put it inside of a <script></script> somewhere in your <body> after you declare the HTML5 canvas.

这就是在Chart.js中创建最小折线图所需的全部。 声明HTML5画布后，只需将其放在<body>某个地方的<script></script>中即可。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      backgroundColor: "rgba(153,255,51,0.4)"
    }, {
      label: 'oranges',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});