chart.js 图表刷新

chart.js 图表刷新

Data is all around us. While search engines and other applications work most optimally with text based representation of data, people find data represented visually to be easy to comprehend. Earlier this year, SitePoint published Aurelio’s article presenting an introduction to Chart.js. This tutorial will provide a quick recap of that introduction followed by a deeper look into the features of Chart.js.

数据无处不在。 虽然搜索引擎和其他应用程序在基于文本的数据表示中可以最佳地工作，但是人们发现以视觉方式表示的数据很容易理解。 今年早些时候，SitePoint发表了Aurelio的文章，介绍了Chart.js的简介 。 本教程将快速概述该介绍，然后对Chart.js的功能进行更深入的研究。

入门 (Getting Started)

Chart.js is an HTML5 canvas based responsive, flexible, light-weight charting library. The library supports six different chart types, each of these chart types coming with a load of customization options. If that is not enough, you also have the ability to create your own custom chart types.

Chart.js是基于HTML5画布的响应式，灵活，轻量级的图表库。 该库支持六种不同的图表类型，每种图表类型都带有大量自定义选项。 如果这还不够，您还可以创建自己的自定义图表类型。

All six core chart types in Chart.js are just 11kb minified and gzip’d and the library is modular so you can further reduce the request size for the file by only including the chart type that you actually need. Below is the cdnjs link to include it:

Chart.js中的所有六种核心图表类型都仅压缩了11kb并进行了gzip压缩，并且该库是模块化的，因此您可以通过仅包含实际需要的图表类型来进一步减少文件的请求大小。 以下是包含它的cdnjs链接：

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

可用的配置选项 (Available Configuration Options)

Chart.js allows you to change almost every aspect of your charts — from tool tips to animation. In this section I will modify a few settings to demonstrate what Chart.js is capable of creating. Here is the HTML we’ll start with:

Chart.js允许您更改图表的几乎每个方面-从工具提示到动画。 在本节中，我将修改一些设置以演示Chart.js能够创建的功能。 这是我们将开始HTML：

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

For the first demonstration, I will create a line chart. There are some basic options that you need to set for the charts to make sense. The line chart expects an array of labels and datasets. The labels appear on the X axis. I have filled up the line chart with some dummy data. The data is broken up into an array of data sets. Each data set has a color for the fill, the line, and the points.

对于第一个演示，我将创建一个折线图。 您需要设置一些基本选项才能使图表有意义。 折线图需要一个labels和datasets数组。 标签出现在X轴上。 我已经用一些虚拟数据填充了折线图。 数据被分解成一组数据集。 每个数据集都有用于填充，线和点的颜色。

I have set fillColor to transparent in this case. If you don’t set a value of fillColor it will be set to black or grey instead. Same goes for other values. The colors are defined using RGBA, RGB, hex, or HSL format, similar to CSS.

在这种情况下，我将fillColor设置为透明。 如果未设置fillColor的值，则将其设置为黑色或灰色。 其他值也一样。 颜色使用类似于CSS的RGBA，RGB，十六进制或HSL格式定义。

var lineData = { labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6', 'Data 7'], datasets: [{ fillColor: 'rgba(0,0,0,0)', strokeColor: 'rgba(220,180,0,1)', pointColor: 'rgba(220,180,0,1)', data: [20, 30, 80, 20, 40, 10, 60] }, { fillColor: 'rgba(0,0,0,0)', strokeColor: 'rgba(151,187,205,1)', pointColor: 'rgba(151,187,205,1)', data: [60, 10, 40, 30, 80, 30, 20] }] }

设置全局选项 (Setting Global Options)

I have included the code that sets some global values. animationSteps determines animation duration. There are many more options that you can modify according to your needs, such as scaleLineColor and scaleIntegersOnly. I suggest that you go through the Chart.js documentation to see what else this library has to offer.

我已包含设置一些全局值的代码。 animationSteps确定动画持续时间。 您可以根据需要修改更多选项，例如scaleLineColor和scaleIntegersOnly 。 我建议您浏览Chart.js文档，以了解该库还提供了什么。

Chart.defaults.global = { animationSteps : 50, tooltipYPadding : 16, tooltipCornerRadius : 0, tooltipTitleFontStyle : 'normal', tooltipFillColor : 'rgba(0,160,0,0.8)', animationEasing : 'easeOutBounce', scaleLineColor : 'black', scaleFontSize : 16 }

设置图表特定选项 (Setting Chart Specific Options)

Besides Global options, there are configuration options available for individual chart types. I will set a few of these options in this line chart to give you an idea:

除了全局选项之外，还有一些配置选项可用于各个图表类型。 我将在此折线图中设置以下几个选项，以使您有所了解：

var ctx = document.getElementById('canvas').getContext('2d'); var lineDemo = new Chart(ctx).Line(lineData, { responsive: true, pointDotRadius: 10, bezierCurve: false, scaleShowVerticalLines: false, scaleGridLineColor: 'black' });

Charts generated by Chart.js are not responsive by default. Setting responsive to true (as done above) makes them responsive. If you need to make every chart responsive, I recommend that you set this globally instead, like this:

默认情况下，由Chart.js生成的图表没有响应。 将responsive设置为true(如上所述)会使它们响应。 如果需要使每个图表都具有响应性，建议您改为全局设置，如下所示：

Chart.defaults.global.responsive = true;

Below you can see the demo of the line chart:

您可以在下面看到折线图的演示：

See the Pen Chart.js Line Chart Demo by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上SitePoint ( @SitePoint )的Pen Chart.js折线图演示 。

动态添加和删除数据 (Adding and Removing Data Dynamically)

Sometimes you need to display data that changes over time. A classic example of this scenario is the stock market. In this section I will create a bar chart and dynamically remove as well as add data to it. I will be using some random data and I have decided to represent data with a bar chart in this case. Most of the code in this example will be similar to the previous example. Once we have our HTML (same as previous example), we can add our JavaScript.

有时您需要显示随时间变化的数据。 这种情况的经典示例是股票市场。 在本节中，我将创建一个条形图，并向其中动态删除和添加数据。 我将使用一些随机数据，在这种情况下，我决定用条形图表示数据。 此示例中的大多数代码将与前面的示例相似。 获得HTML(与前面的示例相同)后，就可以添加JavaScript。

First we will write code to fill up our chart with dummy data. I use a function expression to generate random values and then store it in a variable dData . These values are then used to provide us with random data whenever the need arises. As in the previous example, I create an array of labels and datasets and set an arbitrary fillColor.

首先，我们将编写代码以用虚拟数据填充图表。 我使用函数表达式生成随机值，然后将其存储在变量dData 。 然后，这些值将在需要时用于为我们提供随机数据。 与前面的示例一样，我创建了一个labels和datasets数组，并设置了一个任意的fillColor 。

var dData = function() { return Math.round(Math.random() * 90) + 10; }; var barData = { labels: ['dD 1', 'dD 2', 'dD 3', 'dD 4', 'dD 5', 'dD 6', 'dD 7', 'dD 8'], datasets: [{ fillColor: 'rgba(0,60,100,1)', strokeColor: 'black', data: [dData(), dData(), dData(), dData(), dData(), dData(), dData(), dData()] }] }

Now it’s time to write the code that removes and adds bars to our chart. I begin by initializing the index variable at a value of 11. I am using two methods: removeData() and addData(valuesArray,label). Calling removeData() on a chart instance removes the first value for all datasets on that particular chart. In case of barChartDemo, the first value of the dataset is removed. Calling addData() passing an array of values along with labels adds a new data point at the end of the chart. The code snippet below updates the chart every 3 seconds.

现在是时候编写删除和添加条形图的代码了。 我首先将index变量的值初始化为11。我使用两种方法： removeData()和addData(valuesArray,label) 。 在图表实例上调用removeData()会删除该特定图表上所有数据集的第一个值。 对于barChartDemo ，将删除数据集的第一个值。 调用addData()将值数组与标签一起传递会在图表的末尾添加一个新的数据点。 下面的代码段每3秒更新一次图表。

var index = 11; var ctx = document.getElementById('canvas').getContext('2d'); var barDemo = new Chart(ctx).Bar(barData, { responsive: true }); setInterval(function() { barDemo.removeData(); barDemo.addData([dData()], 'dD ' + index); index++; }, 3000);

An alternative method to update values in a chart is to set the values directly. In the example below, the first line sets the value of the second bar of the first dataset to 60. If you call update at this point, the bar will animate from its current value to 60.

更新图表中值的另一种方法是直接设置值。 在下面的示例中，第一行将第一个数据集的第二个条的值设置为60。如果此时调用update，则该条将从其当前值动画化为60。

barDemo.datasets[0].bars[2].value = 60; barDemo.update();

And here is the bar chart demo:

这是条形图演示：

See the Pen Chart.js Responsive Bar Chart Demo by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上SitePoint ( @SitePoint )的Pen Chart.js响应条形图演示 。

结论 (Conclusion)

This tutorial covered some important features of Chart.js. The first example demonstrated the use of a few global settings. However, Chart.js also provides customization options specific for a chart type. The library allows you to create your own chart types if charts already available don’t meet your requirements. I recommend you to go through the documentation so you can gain a good grasp of what you can and cannot do with this library.

本教程介绍了Chart.js的一些重要功能。 第一个示例演示了一些全局设置的用法。 但是，Chart.js还提供特定于图表类型的自定义选项。 如果已经可用的图表不满足您的要求，则该库允许您创建自己的图表类型。 我建议您仔细阅读文档，以便您可以很好地了解此库可以做什么和不能做什么。

翻译自: https://www.sitepoint.com/fancy-responsive-charts-with-chart-js/

chart.js 图表刷新