Chart.js中文文档-雷达图

雷达图或蛛网图（Radar chart）

简介

A radar chart is a way of showing multiple data points and the variation between them.

They are often useful for comparing the points of two or more different data sets

使用案例

newChart(ctx).Radar(data,options);

数据结构

var data ={

    labels :["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],

    datasets :[{

            fillColor :"rgba(220,220,220,0.5)",

            strokeColor :"rgba(220,220,220,1)",

            pointColor :"rgba(220,220,220,1)",

            pointStrokeColor :"#fff",

            data :[65,59,90,81,56,55,40]},{

            fillColor :"rgba(151,187,205,0.5)",

            strokeColor :"rgba(151,187,205,1)",

            pointColor :"rgba(151,187,205,1)",

            pointStrokeColor :"#fff",

            data :[28,48,40,19,96,27,100]}]}

 

For a radar chart, usually you will want to show a label on each point of the chart, so we include an array of strings that we show around each point in the chart. If you do not want this, you can either not include the array of labels, or choose to hide them in the chart options.

For the radar chart data, we have an array of datasets. Each of these is an object, with a fill colour, a stroke colour, a colour for the fill of each point, and a colour for the stroke of each point. We also have an array of data values.

图表

Radar.defaults ={//Boolean - If we show the scale above the chart data            

    scaleOverlay :false,//Boolean - If we want to override with a hard coded scale

    scaleOverride :false,//** Required if scaleOverride is true **//Number - The number of steps in a hard coded scale

    scaleSteps :null,//Number - The value jump in the hard coded scale

    scaleStepWidth :null,//Number - The centre starting value

    scaleStartValue :null,//Boolean - Whether to show lines for each scale point

    scaleShowLine :true,//String - Colour of the scale line    

    scaleLineColor :"rgba(0,0,0,.1)",//Number - Pixel width of the scale line    

    scaleLineWidth :1,//Boolean - Whether to show labels on the scale    

    scaleShowLabels :false,//Interpolated JS string - can access value

    scaleLabel :"<%=value%>",//String - Scale label font declaration for the scale label

    scaleFontFamily :"'Arial'",//Number - Scale label font size in pixels    

    scaleFontSize :12,//String - Scale label font weight style    

    scaleFontStyle :"normal",//String - Scale label font colour    

    scaleFontColor :"#666",//Boolean - Show a backdrop to the scale label

    scaleShowLabelBackdrop :true,//String - The colour of the label backdrop    

    scaleBackdropColor :"rgba(255,255,255,0.75)",//Number - The backdrop padding above & below the label in pixels

    scaleBackdropPaddingY :2,//Number - The backdrop padding to the side of the label in pixels    

    scaleBackdropPaddingX :2,//Boolean - Whether we show the angle lines out of the radar

    angleShowLineOut :true,//String - Colour of the angle line

    angleLineColor :"rgba(0,0,0,.1)",//Number - Pixel width of the angle line

    angleLineWidth :1,//String - Point label font declaration

    pointLabelFontFamily :"'Arial'",//String - Point label font weight

    pointLabelFontStyle :"normal",//Number - Point label font size in pixels    

    pointLabelFontSize :12,//String - Point label font colour    

    pointLabelFontColor :"#666",//Boolean - Whether to show a dot for each point

    pointDot :true,//Number - Radius of each point dot in pixels

    pointDotRadius :3,//Number - Pixel width of point dot stroke

    pointDotStrokeWidth :1,//Boolean - Whether to show a stroke for datasets

    datasetStroke :true,//Number - Pixel width of dataset stroke

    datasetStrokeWidth :2,//Boolean - Whether to fill the dataset with a colour

    datasetFill :true,//Boolean - Whether to animate the chart

    animation :true,//Number - Number of animation steps

    animationSteps :60,//String - Animation easing effect

    animationEasing :"easeOutQuart",//Function - Fires when the animation is complete

    onAnimationComplete :null}

 Chart.js本站下载地址：

1.Chart.js

2.Chart.js中文文档