HTML5 Advanced -7 HTML5 chart.js (overview, Getting Started, using)

I. Overview of Chart.js

Chart.js Introduction

-Chart.js is a simple, object-oriented, designer and developer-Ready Chart Drawing Tool Library

-Official Address: http://www.chartjs.org/

Chart.js Features

-Based on HTML 5

-Chart.js is based on HTML5 Canvas technology, supports all modern browsers, and offers a downgrade alternative for IE7/8

-Simple and flexible

-Chart.js does not rely on any external tool library, lightweight (only 4.5k after compression), and provides methods for loading external parameters

Chart.js function

-Chart.js helps you visualize your data in different ways

-Each type of chart is animated and looks great, even on the retina screen

-Six types of charts

-Graph

-Bar Chart

-Radar Chart

-Pie chart

-Level Area Map

-Circular Diagram

Ii. Introduction to Chart.js

Chart.js Features

-Introduction of chart.js files in HTML pages

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

-Create <canvas> elements

-a container for displaying chart charts

<canvas id= "MyChart" width= "height=" ></canvas>

-Get the Canvas object

-document.getElementById ("Mycchart"). GetContext ("2d");

-Create chart charts

-New Chart (CTX). Polararea (data);

Chart.js Global Configuration

-Chart.js global configuration introduced in the first official version of Chart.js

-Chart.js global configuration is used to change the type of all charts and avoids the need to set them separately in each chart

-Of course, the Chart.js global configuration can also be configured specifically for a particular chart

Syntax

Chart.defaults.global. Parameter name = value of parameters;

For example

Chart.defaults.global.responsave = true;

Responsave option value True when creating a specified chart

Third, the use of chart.js

Graph

-Graph

-is to draw multiple data points on a single line

-data that is typically used to show trends or a comparison between two sets of data

-Method

-New Chart (CTX). Line (data,options);

-Data: Used to set the shape and the name of the curve

-Options: Option for configuring graphs

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/48/wKiom1b7Sp3ysTXvAAB_ur0sODo496.png "title=" Web.png "alt=" Wkiom1b7sp3ystxvaab_ur0sodo496.png "/>

Bar chart

-Bar Chart

-It's a way to display data in a columnar way

-A comparison between data that is typically used to show trends or multiple sets of data

-Method

-New Chart (CTX). Bar (data,options);

-Data: Used to set the column chart on the date, style and name

-Options: Option for configuring bar charts

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/48/wKiom1b7Sn2CVfQTAABJQFiy7d4572.png "title=" Web.png "alt=" Wkiom1b7sn2cvfqtaabjqfiy7d4572.png "/>

Pie chart

-Pie chart

-Probably the most common one in all charts

-is to divide a circle into several parts, each of which shows the scale value of each data

-typically used to show the proportions between multiple sets of data

-Method

-New Chart (CTX). Pie (data,options);

-Data: Used to set up a pie chart with the information, style and name

-Options: Option for configuring pie charts

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/47/wKiom1b7RFLDo1lgAABOKZ8ZIh4247.png "title=" Web.png "alt=" Wkiom1b7rfldo1lgaabokz8zih4247.png "/>

Radar

-Radar Chart

-is a way to show multiple data points and how they change

-Two or more different datasets that are typically used to compare points

-Method

-New Chart (CTX). Radar (data,options);

-Data: Used to set up a radar chart on the date, style and name

-Options: Option for configuring radar charts

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/48/wKiom1b7Si2xDT3dAAB8kYoiSXw936.png "title=" Web.png "alt=" Wkiom1b7si2xdt3daab8kyoisxw936.png "/>

Polar Area Map

-Polar Area Map

-Similar to a pie chart, but the angle and radius of each sector depend on different values

-typically used to show comparison data similar to a pie chart, but also to show the comparison of range values

-Method

-New Chart (CTX). Polararea (data,options);

-Data: Used to set the polar area map, style and name

-Options: Option for configuring the Polar area Map

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/48/wKiom1b7Sb2AMVdYAACS9s6bH50554.png "title=" Web.png "alt=" Wkiom1b7sb2amvdyaacs9s6bh50554.png "/>

Ring diagram

-Circular Diagram

-Similar to a pie chart, but a doughnut chart is a hollow ring shape

-typically used to show the proportion of relationships between multiple sets of data

-Method

-New Chart (CTX). Doughnut (data,options);

-Data: Used to set up the ring chart, style and name

-Options: Option for configuring a doughnut chart

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/48/wKiom1b7SPeTYPkbAABhFJ11Rx4149.png "title=" Web.png "alt=" Wkiom1b7spetypkbaabhfj11rx4149.png "/>

Summary: This chapter mainly introduces the next HTML5 chart.js (overview, Getting Started, using)

This article from the "Technical Exchange" blog, declined reprint!

HTML5 Advanced -7 HTML5 chart.js (overview, Getting Started, using)