An Excellent Charting Library - CHART.JS
Last Updated: 2019-09-18 17:10:38
Changelog:Fixed the invalid demo URL and updated the jQuery library reference URL.
Today, I'd like to introduce a chart plugin that I believe many of you will find useful. Here are the features highlighted in the official documentation:
1. 6 Chart Types
Chart.js helps you visualize your data in different ways. Every chart type features animations and looks great, even on Retina displays.
2. HTML5-Based
Chart.js is built on HTML5 canvas technology and supports all modern browsers. It also provides fallback alternatives for IE7/8.
3. Simple and Flexible
Chart.js does not depend on any external libraries. It is lightweight (only 4.5k after compression) and provides methods for loading external parameters.
Usage Instructions
1. First, include the following JS and CSS files.
1 | <script src="Chart.js"></script> |
2. Create a chart. To create a chart, we need to instantiate a Chart object. To do this, we first need to pass in a 2D context for drawing the chart. Here is an example.
1 | <canvas id="myChart" width="400" height="400"></canvas> |
3. Add the JavaScript code
1 2 | var ctx = document.getElementById("myChart").getContext("2d");var myNewChart = new Chart(ctx).PolarArea(data); |
We can also use jQuery to get the canvas context. First, retrieve the DOM element we need from the jQuery collection, then call the getContext("2d") method on that DOM element.
1 2 | var ctx = $("#myChart").get(0).getContext("2d");var myNewChart = new Chart(ctx); |
After instantiating the Chart object on the specified canvas, Chart.js automatically scales it for Retina displays.
Once the Chart object is configured, we can continue creating the specific chart types provided by Chart.js.
For detailed usage instructions for each chart type, please refer to the documentation.