让我们使用chart js将图表添加到我们的网站

If you have ever tried to add a chart to a website, you know what a nightmare it is. Even though we manage to add them, we need to spend hours with CSS, customising it to show our data in detail. Since a chart is a graphical representation of data. it needs to be informative and easy to understand. Achieving that might be a challenge. But don’t worry — I’ve got the perfect solution for you. I assure you that by the end of this article, adding charts to your site will be the easiest thing you have ever done.

如果您曾经尝试向网站添加图表，那么您将知道它是一场噩梦。 即使我们设法添加它们，我们也需要花费几个小时来使用CSS，对其进行自定义以详细显示我们的数据。 由于图表是数据的图形表示。 它需要内容丰富并且易于理解。 实现这可能是一个挑战。 但是不用担心-我为您提供了完美的解决方案。 我向您保证，到本文结尾，向您的站点添加图表将是您做过的最简单的事情。

Let me start with a brief introduction to how I found this. It’s been six weeks since my internship at Rootcode Labs started, and I’m working on this cool project that needs charts to show some important data. Then I started to research adding charts, and that’s when I got to know about Chart.js.

让我首先简要介绍一下如何找到它。 自从我在Rootcode Labs实习开始以来已经过去了六个星期，我正在从事这个很酷的项目，需要图表来显示一些重要数据。 然后，我开始研究添加图表，那时我才了解Chart.js 。

什么是Chart.js？ (What Is Chart.js?)

According to the documentation, Chart is a way to create “simple, clean, and engaging HTML5-based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free.”

根据文档，Chart是一种创建“简单，干净且引人入胜的基于HTML5JavaScript图表的方法。 Chart.js 是在您的网站上免费包含动画交互式图形的简便方法。”

With Chart, you’ll get eight responsive chart types, which means you can represent your data in any way.

使用Chart，您将获得八种响应式图表类型，这意味着您可以用任何方式表示数据。

Let’s try a simple example to get a better idea.

让我们尝试一个简单的例子，以获得更好的主意。

安装 (Installation)

Chart can be installed via npm or bower, and also you can use CDN.

可以通过npm或bower安装Chart，也可以使用CDN。

NPM: npm install chart.js --save

NPM： npm install chart.js --save

Bower: bower install chart.js --save

Bower：Bower bower install chart.js --save

CDNJS: https://cdnjs.com/libraries/Chart.js

CDNJS： https ：//cdnjs.com/libraries/Chart.js

用法 (Usage)

Chart can be used with ES6 modules, plain JavaScript, and module loaders.

Chart可以与ES6模块，纯JavaScript和模块加载器一起使用。

创建图表 (Creating a chart)

First of all, you need to create a canvas for the chart on your page using an id for the chart.

首先，您需要使用图表的ID为页面上的图表创建画布。

<canvas id="myChart" width="400" height="400"></canvas>

Once you create the canvas for the chart, all you have to do is add JavaScript code with your configurations. In this example, I’m going to create a bar chart.

为图表创建画布后，您要做的就是在配置中添加JavaScript代码。 在此示例中，我将创建一个条形图。

<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            backgroundColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

That’s it. You just created your first chart with Chart. Isn’t that easy?

而已。 您刚刚使用Chart创建了第一个图表。 那不容易吗？

Chart comes with a bunch of configurations so you don’t need to worry about customising charts. The main chart types Chart offers are line, bar, radar, doughnut and pie, polar area, bubble, scatter, area, and mixed.

图表附带了许多配置，因此您无需担心自定义图表。 图表提供的主要图表类型为折线图，条形图，雷达图，甜甜圈和饼图，极地图，气泡图，散点图，面积图和混合图。

Since Chart is an open source project we also get some handy plugins to create advanced types of charts.

由于Chart是一个开源项目，因此我们还提供了一些方便的插件来创建高级类型的图表。

This is a quick introduction to Chart, and I hope you get something from this. Please make sure to go through the documentation to get a better idea of it. As always, see you guys on the next one. Thanks for reading.

这是Chart的快速入门，希望您能从中学到一些东西。 请确保仔细阅读文档以更好地了解它。 与往常一样，下一个再见。 谢谢阅读。

翻译自: https://medium.com/better-programming/lets-add-charts-to-our-website-using-chart-js-ef4dc89f0281