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中文文檔