1、曲線図(Line chart)
new Chart(ctx).Line(data,options);
データ構造
var data = {
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 : [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]
}
]
}
グラフ・パラメータ
Line.defaults = {
// ——
scaleOverlay : false,
// ——
scaleOverride : false,
//** scaleOverride **
//
scaleSteps : null,
// -
scaleStepWidth : null,
//
scaleStartValue : null,
// ,
scaleLineColor : "rgba(0,0,0,.1)",
//
scaleLineWidth : 1,
// ——
scaleShowLabels : false,
// JS ,
scaleLabel : "",
// ,
scaleFontFamily : "'Arial'",
// ( )
scaleFontSize : 12,
// ——
scaleFontStyle : "normal",
// ——
scaleFontColor : "#666",
// ——
scaleShowGridLines : true,
// ,
scaleGridLineColor : "rgba(0,0,0,.05)",
//
scaleGridLineWidth : 1,
// ——
bezierCurve : true,
// ——
pointDot : true,
// ,
pointDotRadius : 3,
//
pointDotStrokeWidth : 1,
// ——
datasetStroke : true,
//
datasetStrokeWidth : 2,
// ——
datasetFill : true,
// ——
animation : true,
// ,
animationSteps : 60,
// ——
animationEasing : "easeOutQuart",
// ——
onAnimationComplete : null
}
、柱状図(Bar chart)
new Chart(ctx).Bar(data,options);
データ構造
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]
}
]
}
グラフ・パラメータ
Bar.defaults = {
// ——
scaleOverlay : false,
// ——
scaleOverride : false,
//** scaleOverride **
//
scaleSteps : null,
// -
scaleStepWidth : null,
//
scaleStartValue : null,
// ,
scaleLineColor : "rgba(0,0,0,.1)",
//
scaleLineWidth : 1,
// ——
scaleShowLabels : false,
// JS ,
scaleLabel : "",
// ,
scaleFontFamily : "'Arial'",
// ( )
scaleFontSize : 12,
// ——
scaleFontStyle : "normal",
// ——
scaleFontColor : "#666",
/// ——
scaleShowGridLines : true,
// ,
scaleGridLineColor : "rgba(0,0,0,.05)",
//
scaleGridLineWidth : 1,
// ——
barShowStroke : true,
// ——
barStrokeWidth : 2,
// X -
barValueSpacing : 5,
// - X
barDatasetSpacing : 1,
// ——
animation : true,
// ,
animationSteps : 60,
// ——
animationEasing : "easeOutQuart",
// ——
onAnimationComplete : null
}
3、レーダー図またはクモの巣図(Radar chart)
new Chart(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]
}
]
}
グラフ
Radar.defaults = {
// ——
scaleOverlay : false,
// ——
scaleOverride : false,
//** scaleOverride **
//
scaleSteps : null,
// -
scaleStepWidth : null,
//
scaleStartValue : null,
// ——
scaleShowLine : true,
// ,
scaleLineColor : "rgba(0,0,0,.1)",
//
scaleLineWidth : 1,
// ——
scaleShowLabels : false,
// JS ,
scaleLabel : "",
// ,
scaleFontFamily : "'Arial'",
// ( )
scaleFontSize : 12,
// ——
scaleFontStyle : "normal",
// ——
scaleFontColor : "#666",
// ——
scaleShowLabelBackdrop : true,
// ,
scaleBackdropColor : "rgba(255,255,255,0.75)",
// ——
scaleBackdropPaddingY : 2,
// ——
scaleBackdropPaddingX : 2,
// ——
angleShowLineOut : true,
// -
angleLineColor : "rgba(0,0,0,.1)",
//
angleLineWidth : 1,
//
pointLabelFontFamily : "'Arial'",
//
pointLabelFontStyle : "normal",
// ( )
pointLabelFontSize : 12,
//
pointLabelFontColor : "#666",
// ——
pointDot : true,
// ,
pointDotRadius : 3,
//
pointDotStrokeWidth : 1,
// ——
datasetStroke : true,
//-
datasetStrokeWidth : 2,
// ——
datasetFill : true,
// ——
animation : true,
// ,
animationSteps : 60,
// ——
animationEasing : "easeOutQuart",
// ——
onAnimationComplete : null
}
4、極地領域図(Polar area chart)
new Chart(ctx).PolarArea(data,options);
データ構造
var data = [
{
value : 30,
color: "#D97041"
},
{
value : 90,
color: "#C7604C"
},
{
value : 24,
color: "#21323D"
},
{
value : 58,
color: "#9D9B7F"
},
{
value : 82,
color: "#7D4F6D"
},
{
value : 8,
color: "#584A5E"
}
]
グラフ
PolarArea.defaults = {
// ——
scaleOverlay : true,
// ——
scaleOverride : false,
//** scaleOverride **
//
scaleSteps : null,
// -
scaleStepWidth : null,
//
scaleStartValue : null,
// ——
scaleShowLine : true,
// -
scaleLineColor : "rgba(0,0,0,.1)",
// —— ,
scaleLineWidth : 1,
// ——
scaleShowLabels : true,
// JS ,
scaleLabel : "",
// ,
scaleFontFamily : "'Arial'",
// ( )
scaleFontSize : 12,
// ——
scaleFontStyle : "normal",
// ——
scaleFontColor : "#666",
// ——
scaleShowLabelBackdrop : true,
// ,
scaleBackdropColor : "rgba(255,255,255,0.75)",
// ——
scaleBackdropPaddingY : 2,
// ——
scaleBackdropPaddingX : 2,
// ——
segmentShowStroke : true,
// , 。
segmentStrokeColor : "#fff",
// -
segmentStrokeWidth : 2,
// ——
animation : true,
// ,
animationSteps : 100,
// ——
animationEasing : "easeOutBounce",
// ——
animateRotate : true,
// ——
animateScale : false,
// ——
onAnimationComplete : null
}
5、餅図(Pie chart)
new Chart(ctx).Pie(data,options);
データ構造
var data = [
{
value: 30,
color:"#F38630"
},
{
value : 50,
color : "#E0E4CC"
},
{
value : 100,
color : "#69D2E7"
}
]
グラフ
Pie.defaults = {
// ——
segmentShowStroke : true,
// ,
segmentStrokeColor : "#fff",
// ——
segmentStrokeWidth : 2,
// ——
animation : true,
// ,
animationSteps : 100,
// ——
animationEasing : "easeOutBounce",
// ——
animateRotate : true,
// ——
animateScale : false,
// — 。
onAnimationComplete : null
}
6、ドーナツチャート
new Chart(ctx).Doughnut(data,options);
データ構造
var data = [
{
value: 30,
color:"#F7464A"
},
{
value : 50,
color : "#E2EAE9"
},
{
value : 100,
color : "#D4CCC5"
},
{
value : 40,
color : "#949FB1"
},
{
value : 120,
color : "#4D5360"
}
]
グラフ
Doughnut.defaults = {
// ——
segmentShowStroke : true,
// ,
segmentStrokeColor : "#fff",
// ——
segmentStrokeWidth : 2,
// ， .
percentageInnerCutout : 50,
// ——
animation : true,
// ,
animationSteps : 100,
// ——
animationEasing : "easeOutBounce",
// ——
animateRotate : true,
// ——
animateScale : false,
// —— 。
onAnimationComplete : null
}