Shulou(Shulou.com)06/03 Report--

This article is to share with you about how to use ichartjs. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Ichartjs is a graphics library based on html5. Using pure JavaScript language, using the canvas tag of html5 to draw all kinds of graphics. Ichartjs is committed to providing simple, intuitive, interactive experience-level chart components for your application. It is the solution of WEB/APP chart display. If you are developing html5 applications, ichartjs is just right for you. Ichartjs currently supports pie chart, ring chart, line chart, area chart, column chart and bar chart. Ichartjs is an open source project based on the ApacheLicense2.0 protocol.

Ichartjs is based on HTML5 graph and chart component

1. Build the project environment

Since ichartjs is a js library, just add ichart.js to the head of your page to complete the ichartjs runtime. The code is as follows:

two。 Example illustration

We use a 2D bar chart to show the position of each letter of HelloWorld in the alphabet. We abstract the location to its height. To show a different HelloWorld in our way.

3. Preview

Let's take a look at the final preview of the example to make it less boring for you to read. As shown below:

IchartjsHTML5 Graph Chart component Code description

/ / define data

Vardata= [

{name:'H',value:7,color:'#a5c2d5'}

{name:'E',value:5,color:'#cbab4f'}

{name:'L',value:12,color:'#76a871'}

{name:'L',value:12,color:'#76a871'}

{name:'O',value:15,color:'#a56f8f'}

{name:'W',value:13,color:'#c12c44'}

{name:'O',value:15,color:'#a56f8f'}

{name:'R',value:18,color:'#9f7961'}

{name:'L',value:12,color:'#76a871'}

{name:'D',value:4,color:'#6f83a5'}

]

Thank you for reading! This is the end of the article on "how to use ichartjs". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.