Chart.js | HTML5 Chart Drawing Tool Library (knowledge collation, Chinese notes, Chinese documents)

Chart.js: make your data visible in a different way. Each type of chart is animated and looks great, even on the retina Screen. Based on the HTML5 canvas technology, Chart.js does not rely on any external tool library, lightweight (only 4.5k after compression). It is recommended to learn!

GitHub source: https://github.com/nnnick/Chart.jsChart.js document: http://www.bootcss.com/p/chart.js/

　　

Steps:

HTML section:

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

　　

JavaScript section:

1. Introduction of Chart.js files;
2. Create a chart: instantiate a chart Object (get DOM node to get a 2d context environment and instantiate it);
3. After instantiating the chart object, you continue to create a specific type of chart.

Graph (line chart):

Html:

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

Javascript: (introduction and two ways of Using)

<script src= "js/chart.min.js" ></script><script type= "text/javascript" >//mode one: var ctx = document.g    Etelementbyid ("mychart"). GetContext ("2d");; var mynewchart = new Chart (ctx). Line (data); This approach is to load only the dataset, (the default OPTIONS) does not modify the default parameters (called Law one)//data structure (data parameter Settings) var data = {//line charts need to set a label for each data point.        This is displayed on the X-axis.        Labels: ["january", "february", "march", "April", "may", "June", "july"],//data set (y-axis data range dynamically changed with data in data set with maximum or Minimum) Datasets: [{fillcolor: "rgba (220,220,220,0.5)",//background fill Color strokecolor: "rgba (22 0,220,220,1) ",//path color pointcolor:" rgba (220,220,220,1) ",//data point Color pointstrokecolor:" #fff ",//number of data points border color Data: [10, 59, 90, 81, 56, 55, 40]//object, {FILLC Olor: "rgba (151,187,205,0.5)", strokecolor: "rgba (151,187,205,1)", pointcolor: "rgba (151,187,205,1) ", pointstrokecolor:" #fff ", Data: [};</script>, max, max, +, +]}] 

　　Data:

Data structure (parameter Setting)    var = {        //line chart needs to set a label for each data point. This is displayed on the X-axis.        labels: ["january", "february", "march", "April", "may", "June", "july"],        // Data set (the Y-axis data range dynamically changes with the largest or smallest data in data Collection)        datasets: [{                    fillcolor: "rgba (220,220,220,0.5)",//background Fill Color                    Strokecolor: "rgba (220,220,220,1)",//path color                    pointcolor: "rgba (220,220,220,1)",//data point color                    pointstrokecolor: "# FFF ",//number of data points border color                    data: [10, 59, 90, 81, 56, 55, 40]//object information                }, {                    fillcolor:" rgba (151,187,205,0.5) ",                    St Rokecolor: "rgba (151,187,205,1)",                    pointcolor: "rgba (151,187,205,1)",                    pointstrokecolor: "#fff",                    Data: [+----------            

　　Icon Parameters:

Line.defaults = {//the Grid line is scaleoverlay:false above the data line,//whether to rewrite y-axis gridlines with hard coding                scaleoverride:false,//** Required If Scaleoverride is true * * Number of//y Axis ticks                scalesteps:null,//y axis The width of each scale scalestepwidth:20,//Y-axis starting value                   scalestartvalue:null,//y/x axis color scalelinecolor: "rgba (0,0,0,.1)", The width of the x, y axis Scalelinewidth:1,//tick whether the label is displayed, i.e. whether the text is displayed on the Y axis Scaleshowlabels:tru The scale on the e,//y axis, i.e. text scalelabel: "<%=value%>",//font Scalefo Ntfamily: "' Arial '",//text size scalefontsize:16,//text style Scalef                Ontstyle: "normal",//text Color scalefontcolor: "#666",//whether the grid is displayed Scaleshowgridlines:true,//grid Color scalegridlinecolor: "rgba (0,0,0,.05)",//grid Width scale Gridlinewidth:2,//do You use Bezier curves?                 That is: the line is bent beziercurve:true,//whether to display the number of points pointdot:true,//dot size                Pointdotradius:5,//dot stroke width, that is: dot outer white size pointdotstrokewidth:2, Data set Travel (wiring Path) datasetstroke:true,//width of line, that is: dataset Datasetstrokewidth:2                ,//whether to populate the data set Datasetfill:true,//whether to perform animation animation:true, Animation time animationsteps:60,//animation Effects Animationeasing: "easeoutqu Art ",//execution Function/*onanimationcomplete:null*/when The animation is complete

　　(indicates just contact chart.js, See this chart parameter whole person is ignorant, still whole English comment, hehe ~)

After you have finished understanding the chart parameters, You can customize the chart parameters, and look at the specific case usage below:

HTML section and JS file introduction part omitted: (the following chart type is also omitted!)

<script type= "text/javascript" >//the same Data parameter setting var data = {//line chart You need to set a label for each data point.                This is displayed on the X-axis.                 Labels: ["january", "february", "march", "April", "may", "June", "july"],//the thisid of this side corresponds to the ID of labels respectively Thisids: [12,22,50,44,99,3,67],//dataset (the Y-axis data range dynamically changes with the largest or smallest data in data Collection) datasets: [ {fillcolor: "rgba (220,220,220,0.5)",//background Fill Color strokecolor: "rgba (220,220,220,1)",//                    Path color pointcolor: "rgba (220,220,220,1)",//data point color pointstrokecolor: "#fff",//number of points border color Data: [10, 59, 90, 81, 56, 55, 40]//object data}, {fillcolor: "rgba (151,1                     87,205,0.5) ", strokecolor:" rgba (151,187,205,1) ", pointcolor:" rgba (151,187,205,1) ",       Pointstrokecolor: "#fff", data: [28, 48, 40, 19, 96, 27, 200]}     };                    window.onload = function () {var ctx = document.getElementById ("mychart"). getcontext ("2d"); Method Two: pass in the object literal to modify the default icon parameter, custom chart var mynewchart = new Chart (ctx).                        Line (data, {//grid color scalegridlinecolor: "rgba (255,0,0,1)",                        y/x axis color scalelinecolor: "rgba (0,0,0,.1)",//text size                        Scalefontsize:16,//text Color Scalefontcolor: "#666", Grid color Scalegridlinecolor: Rgba (0,0,0,.05),//do you use Bezier curves?                        That is: whether the line bends//whether to perform animation animation:true,//animation time Animationsteps:60,//execution function when the animation is complete onanimationcomplete:functi On () {console.log ("lable to X-axisId: ");                        Console.log (data.thisids);                }                    }); }</script>

　　：

Bar Chart:

New Chart (ctx). Bar (data,options);//précis-writers, Options can default

　Data:

var data = {    labels: ["january", "february", "march", "April", "may", "June", "july"],    datasets: [        {            Fillcolor: "rgba (220,220,220,0.5)",            strokecolor: "rgba (220,220,220,1)",            data: [65,59,90,81,56,55,40]        },        {            fillcolor: "rgba (151,187,205,0.5)",            strokecolor: "rgba (151,187,205,1)",            data: [ 28,48,40,19,96,27,100]        }    ]}

　　Icon Parameters:

Bar.defaults = {//the Grid line is scaleoverlay:false above the data line,//whether to rewrite y-axis gridlines with hard coding                scaleoverride:false,//** Required If Scaleoverride is true * * Number of//y Axis ticks                scalesteps:null,//y axis width scalestepwidth:null per tick,//y axis start value scalestartvalue:null,//y/x axis color scalelinecolor: "rgba (0,0,0,.1)",/                /x, Y axis width scalelinewidth:1,//tick whether the label is displayed, that is, whether the text Scaleshowlabels:false is displayed on the Y axis, The scale on the y-axis, that is, the text scalelabel: "<%=value%>",//font scalefontf Amily: "' Arial '",//text size scalefontsize:12,//text style Scalefon Tstyle: "normal",//text color scalefontcolor: "#666",//whether to display the grid s caleshowgridlines:true,                Grid color scalegridlinecolor: rgba (0,0,0,.05),//grid width scaleg                Ridlinewidth:1,//bar Chart specific parameters://whether to draw the border of the bar barshowstroke:true,                The width of the bar border barstrokewidth:2,//the spacing between bars (too large or too small will appear overlapping offset dislocation effect, please control the reasonable Value)                barvaluespacing:5,//the spacing between bars in each group of columnar bars Bardatasetspacing:5,//whether a hint is displayed                Showtooltips:true,//whether to perform animation animation:true,//animation time Animationsteps:60,//animation effect Animationeasing: "easeoutquart",//animation When the completion of the Line function onanimationcomplete:null}

　　Partial JavaScript instances

var barchart = new Chart (ctx). Bar (data, {                        Scalelabel: "$" + "<%=value%>",//                        whether to draw the border of the bar                        barshowstroke:true,                        //width                        of the bar Border) barstrokewidth:2,                        //spacing between columns (too large or too small to overlap offset misalignment, control of reasonable values)                        barvaluespacing:5,                        //spacing                        between bars in each group of bar groups bardatasetspacing:5,                    });

　　

:

Pie Chart:

Javascript:

var data=[            {                value:40,                color: "#21F0EA",//background color                highlight: "#79E8E5",//highlight background color                label: ' javascript '//text label            },{                value:60,                color: ' #E0E4CC ',                highlight: ' #EAEDD8 ',                label: ' jquery '            },{                value:100,                color: "#69D2E7",                highlight: "#83E5F7",                label: ' html '            }        ];

　　Icon Parameters:

Pie.defaults = {//                    whether to display each stroke (I.E. sector, not true to see the border color set later)                    segmentshowstroke:true,                    //set The border color                    for each stroke Segmentstrokecolor: "red",                    //heart is the width of each sector border                    segmentstrokewidth:2,                    //boolean-whether to perform animation                    animation:true ,                    //number-animation time                    animationsteps:100,                    //string-animation effect                    animationeasing: "easeoutbounce",                    // Boolean-whether to rotate                    the animation animaterotate:true,                    //boolean-whether to animate the center of the pie chart (good Effect)                    animatescale:true,                    // Function-onanimationcomplete:null of functions executed when fire animation is complete                

　　Some JavaScript instances:

var Ctx=document.getelementbyid ("piechart"). getcontext ("2d"); window.piechart=new Chart (ctx). Pie (data,{//                    whether to show each stroke (that is, The sector, not true, you cannot see the border color set later)                    segmentshowstroke:true,                    //set The border color                    for each stroke Segmentstrokecolor: "red",                    //width of each sector border                    segmentstrokewidth:2,                    //boolean-whether to perform animation                    animation:true,                    //number-animation time                    animationsteps:100,                    //string-animation effect                    animationeasing: "easeoutbounce",                    // Boolean-whether to rotate                    the animation animaterotate:true,                    //boolean-whether to animate the center of the pie chart (good Effect)                    animatescale:true,                    // function-//onanimationcomplete:null} of functions executed when the animation is completed                );

　　

:

Circle Diagram:

Javascript:

New Chart (ctx). Doughnut (data,options);

　　

Data structure (similar to PIE chart)            var data = [{                value:30,                color: "#F7464A",                highlight: "#FA7C7C",                label: "angularJS"            }, {                value:50,                color: "#E2EAE9",                highlight: "#F2F5F5",                label: "juqery"            }, {                value:                color: "#D4CCC5",                hightlight: "#DBD6D1",                label: "javascript"            }, {                value:40,                Color: "#949FB1",                highlight: "#AFBCCE",                label: "nodeJS"            }, {                value:120,                color: "#4D5360",                highlight: "#767C86",                label: "html"            }];

　　Icon Parameters:

doughnut.defaults={//                        whether to show each stroke (that is, the ring area, not true can not see the border color set later)                        segmentshowstroke:true,                        //set The border color for each stroke                        segmentstrokecolor: "#fff",                        //set The border width of each ring                        segmentstrokewidth:2,                        //the ratio of the center cut circle of the icon (0 for Pie chart, Close to 100 the smaller the ring Width)                        percentageinnercutout:50,//                        whether to perform animation                        animation:true,                        //perform animation time                        animationsteps:100,                        //animation effect                        animationeasing: "easeoutbounce",//                        whether to rotate animation                        animaterotate:true, //                        whether to scale the chart center                        animatescale:true,                        //callback function when animation is complete//                      onanimationcomplete:null                }

　　

:

chart.js A total of six big charts : In addition, There are two kinds: radar or spider, Polar area map, readers please refer to: chart.js Chinese documents

so, Here's the problem!? what about the legend of the chart ? This goods is also very commonly used in the application! After many times, find the following methods to achieve the legend section, worship a big God before the road! In addition to this, you can automatically display each group of data when the animation is complete, instead of manually viewing each group of data!
Directly on each part of the Code:
HTML section:

　　CSS section:(you may not see the desired effect if you don't set the underlying Style)
<style>            ul,li{                list-style-type:none;;            }            ul>li{                margin:5px auto;                Font-family: "microsoft Jas black";            }            span{                display:inline-block;                width:20px;height:20px;line-height:20px;                vertical-align:middle;                margin-right:5px;            }        </style>
　　JavaScript section:
window.onload = function () {var ctx = document.getElementById ("barchart"). getcontext ("2d"); var barchart = new Chart (ctx).                        Bar (data, {showtooltips:false,//whether The prompt is displayed, this needs to be set to False//template                        Legendtemplate: ' <ul class=\ ' <%=name.tolowercase ()%>-legend\ "> ' + ' <% for (var i=0; i<datasets.length; i++) {%> ' + ' <li><span style=\ ' backg round-color:<%=datasets[i].fillcolor%>\ "></span> ' + ' <%if (datasets[i].label) {%> <%=datasets[i].label%><%}%></li> ' + ' <%}%> ' + ' </ul > ', onanimationcomplete:function () {//the corresponding data is displayed after the animation is complete var ctx = this.ch                            art.ctx;                            Ctx.font = this.scale.font; Ctx.fillstyle =this.scale.textColor;                            ctx.textalign = ' Center ';                            Ctx.textbaseline = ' Bottom ';                                    This.datasets.forEach (function (dataset) {dataset.bars.forEach (function (bar) {                                Ctx.filltext (bar.value, bar.x, bar.y);                            });                        });                    }                    });                    var legend = document.getElementById (' legend ');                Legend legend.innerhtml = Barchart.generatelegend (); }//data structure: var data = {labels: ["January", "February", "March", "April", "May", "June", "July"], dat                    Asets: [{fillcolor: "rgba (220,220,220,0.5)", strokecolor: "rgba (220,220,220,1)",                 Data: [up to,,,----------------------], label: Sales of the Month//legend label},{   Fillcolor: "#69D2E7", strokecolor: "#B2E5ED", data: [54, 99, 72, 61, 86, 65, 84], Label: "quarterly sales"}]};
　　
:
summary:
Chart.js Six kinds of charts, the JS section is roughly divided into data structures, chart parameters (common parameters and their own unique parameters) and instantiation of the three parts of the reference, and the dynamic loading of data can be in the database Data property of the input JSON such as data files or Variables. In a number of actual combat may need to use data charts, presented to the user a better user experience, the study précis-writers for future review, use!
　
Chart.js | HTML5 Chart Drawing Tool Library (knowledge collation, Chinese notes, Chinese documents)