Chart.js Simple icon Drawing tool

Objective

Chart.js

Chart.js helps you visualize your data in different ways. Each type of chart is animated and looks great, even on the retina screen.

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

Chart.js does not rely on any external ToolPak, lightweight (only 4.5k after compression), and provides a way to load external parameters.

1 importing chart.js files

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

2 add a canvas element and specify the ID, width, and height of the element .

<id= "MyChart"  width= " height"= " the" ></ Canvas >

3 writing JS

Graphs, histograms, and radar graphs can share a set of compilation methods

First fill in the horizontal axis data, and then compile the fill line color, etc., and finally choose to export that graph, graph (line), histogram (bar) and Radar chart (Radar)

<Script>        varCTX=document.getElementById ("MyChart"). GetContext ("2d"); varData={labels: ["January","February","March","April"," May","June","July"], datasets: [{fillcolor:"Rgba (220,220,220,0.5)", Strokecolor:"Rgba (220,220,220,1)", Pointcolor:"Rgba (220,220,220,1)", Pointstrokecolor:"#fff", data: [ $, -, -,Bayi, About, -, +]}, {fillcolor:"Rgba (151,187,205,0.5)", Strokecolor:"Rgba (151,187,205,1)", Pointcolor:"Rgba (151,187,205,1)", Pointstrokecolor:"#fff", data: [ -, -, +, +, the, -, -]                }            ]        }                NewChart (CTX).        Line (data); //NewChart (CTX).        Bar (data); //NewChart (CTX). Radar (data);</Script>

Polar region, pie, and doughnut graphs can share a set of compilation methods

You need to edit the name and data of each part individually, and finally choose to export that graph, polar area map (polararea), pie chart (PIE), and doughnut chart (doughnut)

<Script>    varCTX=document.getElementById ("MyChart"). GetContext ("2d"); varData=[{value: -, Color:"#D97041"}, {value: -, Color:"#C7604C"}, {value: -, Color:"#21323D"}, {value: -, Color:"#9D9B7F"}, {value: the, Color:"#7D4F6D"}, {value:8, Color:"#584A5E"        }    ]        NewChart (CTX).    Polararea (data); //new Chart (CTX). Pie (data);    //new Chart (CTX). Doughnut (data);    </Script>

Chart.js Simple icon Drawing tool