Chart.js: A simple JS Chart Library

Source: Internet
Author: User

Chart.js is a JavaScript Chart Library with Open Source. It has a total of 6 in the Chart, all HTML5 based.

Below is a sample of the 6 charts provided by Chart.js, including line charts, column charts, pie charts, and so on, which makes it easy to implement the effects of dynamic graphs in HTML pages:

Line Chart

Bar Chart
Radar Chart
Pie Chart
Polar Area Chart
Doughnut Chart
Get started quickly

You can download chart.js:https://github.com/nnnick/chart.js to GitHub. Chart.js only need a. js file, you can choose the general version of the Chart.js, you can also choose the Slim version of the Chart.min.js.

After downloading from GitHub, there are 6 examples of Chart in the Samples folder. For example, after opening the samples/line.html, the browser immediately appears a line Chart:

The contents of the line.html are as follows (JavaScript section):

How to add data points dynamically?

It is a pity that Chart.js does not provide a method for dynamically increasing the number of locations. However, I took some time to study, found there is still a way. My approach is this: after modifying the contents of the datasets, call new chart again () to regenerate the chart. The following are examples of program code:

It is important to note that because Chart.js is animated when drawing, the animation must be set to Flase to turn off the animation.

You can then dynamically add data points:

Chart.js: A simple JS Chart Library

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.