ccchart v1.06.3 2013.6.6

ccchartReference
値

configオブジェクトへ記述

プロパティ名type

種類設定

typechartname

チャート

説明

Method & Property"line""bar""stacked""area""stackedarea""stacked%""bezi2""bezi""pie""scatter""ampli"プロパティ名

領域設定

width
numberheightnumberaxisXWidth
numberaxisXLen
numberaxisYWidth
numberaxisYLen
numberaxisYLen
numberonlyChart
stringonlyChartWidthTitle string
paddingTop
numberpaddingBottom
numberpaddingLeft
numberpaddingRightnumberxColorcolor
yColorcolor

チャート領域説明
canvasの幅
canvasの高さ
水平目盛り線の幅
水平目盛り線の本数
垂直目盛り線の幅
垂直目盛り線の本数
scatter時の垂直目盛り線の本数
チャートのみを表示
チャートとタイトルのみを表示
チャートの上パディング
チャートの下パディング
チャートの左パディング
チャートの右パディング
水平目盛り線の色
垂直目盛り線の色
プロパティ名

読み出し専用

type

プロパティ名

type

説明

bg
プロパティ名string

背景色

グラデーション

bgGradientobjecttype

プロパティ名configオブジェクトへ記述

プロパティ名

type

画像設定

img

array

＊この配列パターンに後日Alphaも埋め込みたい

imgAlpha (add v1.06.3+)

numberconfigオブジェクトへ記述

プロパティ名

type

文字列設定 タイトル

title
stringtitleColor
color
titleFont
font
titleTextAlignaligntitleYnumbersubTitle
stringsubTitleColor
color
subTitleFont
font
subTitleTextAlignalignsubTitleY
number
xScaleColorcolor
xScaleFont
font
xScaleAlignalignxScaleXOffset
number
xScaleYOffset
number
xScaleSkip
numbercolNamesTitleOffset number
yScaleColor
color
yScaleFont
font
yScaleAlignalignyScaleXOffset
numberyScaleYOffset
numberyScalePercent
stringhanreiColor
color
hanreiFont
font
hanreiAlignalignhanreiLineHeightnumberhanreiXOffset
numberhanreiYOffset
numberhanreiRadius
numberhanreiMarkerStyle string
unit
stringunitColor
color
unitFont
font
unitAlignalignunitXOffset
number
unitYOffset
number※memoを参照
プロパティ名type

メモ

文字色一括指定 textColors

unitshadows

例

color
color
color

説明

例

省略時
{direction:"vertical",from:"#687478",to:"#222"}

グラデーションの方向
開始色
終了色

vertical(上から下へ) | horizontal（左から右へ）

説明"horizontal""#000""#ｆｆｆ"

例"vertical""#687478""#222"

省略時["hoge.png"][imgsrc]
チャート全体に画像表示[imgsrc, dx, dy] dx, dy は、描画するイメージを配置する座標 ["hoge.png", 80,120]["hoge.png", 60,180,250,80][imgsrc, dx, dy, dw, dh] dw, dh は幅と高さ[imgsrc, sx, sy, sw, sh, dx, dy, dw, dh] 使用範囲を指定 ["hoge.png", 50, 50, 100, 50, 10, 10, 200, 50][["hoge1.png", 450,135,100,30], ["hoge2.png", 120,135,100,30]]
複数画像を二次元配列で指定できる (add v1.06.3+)

null
nullnull
null
null

0.5

画像の透明度

説明

1

例

タイトル文字列
色フォント
位置
タイトルのtop位置
サブタイトル文字列
色フォント
位置
サブタイトルのtop位置
水平軸目盛値の色
フォント
位置XオフセットYオフセットX軸目盛のスキップ 数値
項目名タイトルオフセットX
垂直軸目盛値の色
フォント
位置XオフセットYオフセットY軸目盛のパーセント表示
凡例文字列の色フォント
位置
1行の高さ
XオフセットYオフセット
マーカー半径(または1/2辺)マーカーの形
単位文字列
色フォント
位置
XオフセットYオフセットfor all chartTypes
for all chartTypes
for all chartTypes http://www.w3.org/TR/2dcontext/#text-styles
for all chartTypes "start"|"end"|"left"|"right"|"center"
for all chartTypes
for all chartTypes
for all chartTypes
for all chartTypes http://www.w3.org/TR/2dcontext/#text-styles
for all chartTypes "start"|"end"|"left"|"right"|"center"
for all chartTypes
widthout pie ※水平軸目盛はdadaの1行目を項目名とする場合に表示
widthout pie
widthout pie "start"|"end"|"left"|"right"|"center"widthout pie 目盛のXは、垂直目盛線X + xGap/2 - xScaleXOffset
widthout pie 目盛と項目名タイトルのYは、chartBottom + xScaleYOffset
widthout pie 与えた数値分表示をスキップしY軸幅が太くなります
widthout pie 項目名タイトルのXは、chartRight + colNamesTitleOffset
widthout pie ※yScalePercent==='yes'と "stacked%"は%表示
widthout pie
widthout pie "start"|"end"|"left"|"right"|"center"widthout pie ラベルのXは、垂直目盛線X + xGap/2 - xScaleXOffset
widthout pie ラベルと項目名のYは、chartBottom + xScaleYOffset
widthout pie "stacked"は強制"yes"for all chartTypes ( マーカーの色はthis.colorSet )for all chartTypes
for all chartTypes "start"|"end"|"left"|"right"|"center"
for all chartTypes
for all chartTypes ラベルのXは、垂直目盛線X + xGap/2 - xScaleXOffset
for all chartTypes ラベルと項目名のYは、chartBottom + xScaleYOffset
for all chartTypes hanreiMarkerStyle === "arc"なら半径。"rect"なら1/2辺。
for all chartTypes ラベルと項目名のYは、chartBottom + xScaleYOffset
for all chartTypes ※language==='ja'なら頭に'単位:'を付けます
for all chartTypes
for all chartTypes
for all chartTypes "start"|"end"|"left"|"right"|"center"
for all chartTypes 目盛のXは、垂直目盛線X + xGap/2 - xScaleXOffset
for all chartTypes 目盛と項目名タイトルのYは、chartBottom + xScaleYOffset"タイトルです""red""900 10px 'serif'""left"
10"サブタイトルです""#000""900 10px 'serif'""left"
10"#000""100 10px 'serif'""left"
510315"#000""100 10px 'serif'""left"
510"yes""#000""100 12px 'Arial'""right"2051010"rect""千円""#000""100 10px 'serif'""left"
510typeoj内の各プロパティ名

説明

例

object

各文字列の色を一括指定(データ値valColor以外) for all chartTypes

object

color
color
color
color
color
color
color

タイトルの色サブタイトルの色
X方向の水平軸ラベル色
Y方向の垂直軸ラベル色
凡例の色
単位の色
メモの色

省略時
""

(省略時のpaddingTopは自動調整)

titleColor > textColor > textColors.title > #ddd

"100 28px 'Arial'""center"38""(省略時のpaddingTopは自動調整)
subTitleColor > textColor > textColors.subTitle > #ccc

"100 12px 'Arial'""center"55(if(this.title === '')subTitleY = 25;)

xScaleColor > textColor > textColors.x > #aaa

"100 12px 'Arial'""center"
018
022
yScaleColor > textColor > textColors.y > #aaa

"100 12px 'Arial'""right"020"no"hanreiColor > textColor > textColors.hanrei > #ccc

項目数によって自動計算 "100 " + fontsize + "px 'Arial'""left"
項目数によって自動計算 (len < 10) ? 20 : (len < 20) ? 14 : 81440
40"arc"
省略時は単位表示なし
unitColor > textColor > textColors.unit > #aaa

"100 12px 'Arial'""right"1012

省略時{"title":"#ccc","subTitle":"#ddd","x":"#aaa","y":"#aaa","hanrei":"#ccc","unit":"#aaa","memo":"#ccc"}"#000""#000""#000""#000""#000""#000""#000""#ccc""#ddd""#aaa""#aaa""#ccc""#aaa""#ccc"

単位を一括指定 for all chartTypes

objectstringnumbernumberaligncolor
font

単位文字列
canvas左辺からの距離
canvas上辺からの距離
位置
色
フォント

影を一括指定allshadowhanrei
shadow
xline
shadow
line
shadowbarshadow
stackedshadowstackedarea
shadowbezi2
shadow
drawbeziline2 shadow

指定があれば、下記すべての影のカスタムデフォルト値 [color, x, y, blur]
凡例の影 [color, x, y, blur]
水平カスタム目盛線の影 [color, x, y, blur]
ラインチャートの影 [color, x, y, blur]
バーチャートの影 [color, x, y, blur]
積み上げチャートの影 [color, x, y, blur]
積み上げ面チャートの影 [color, x, y, blur]
ベジェラインチャート2の影 [color, x, y, blur]
ベジェラインチャートの影 [color, x, y, blur]

プロパティ名type

説明

useValpercentVal

stringstring

チャートに値を表示する
チャートの値をパーセント表示する (add v1.06.3+)

configオブジェクトへ記述

プロパティ名type

その他

useToolTipstringbarTipAnchorColor color
useMarker
string値表示

省略時
bg > bgGradient > vertical, from #687478, to #222

画像を埋め込む ( <img>要素・ <canvas>要素・ <video>要素 )

unit
left
top
align
color
font
影一括指定

type

配列のパターン

title
subTitlexyhanreiunit
memo
単位一括指定

600
400
110
1
10
10
"no"
"no"
自動計算
自動計算
自動計算
自動計算
rgba(180,180,180,0.3)
rgba(180,180,180,0.3)

背景色グラデーション
direction
fromto単位

省略時

300
200
220
22020
"yes"
"yes"
100
100
100
100"#000""#000"

グラフ領域の幅
グラフ領域の高さグラフ領域の上端グラフ領域の下端
グラフ領域の左端
グラフ領域の右端
水平目盛線用の目盛間隔 Y方向のギャップ
垂直目盛線用の目盛間隔 X方向のギャップ
垂直目盛本数

背景色

凡例

例

ccchart.ops['hoge0'].chartTop
chartWidth
chartHeight
chartTop
chartBottom
chartLeftchartRight
yGap
xGap
axisYLen

背景設定

垂直軸目盛値"line"

説明

configオブジェクトへ記述

水平軸目盛値

for all chartTypes
for all chartTypes
for all chartTypes
for all chartTypes (垂直目盛り線はdata列数から自動計算)
for all chartTypes xScaleSkip時は強制でスキップ線が1、節目の線が3
for all chartTypes (垂直目盛り線はdata列数から自動計算)
for scatter (垂直目盛り線はdata列数から自動計算)
for all chartTypes (タイトル,サブタイトル,水平垂直目盛無し)
for all chartTypes (サブタイトル,水平垂直目盛無し)
for all chartTypes
for all chartTypes
for all chartTypes
for all chartTypes
for all chartTypes
for all chartTypes

ccchart.プロパティ名
または、ccchart.ops[id名].プロパティ名
でアクセス

サブタイトル省略時

ラインチャート
バーチャート
積み上げチャート
面チャート。色の透明度はcolorSetへRGBAやHSLA形式で指定積み上げ面チャート。縦方向に積み上げる面(Area)チャート
構成比推移チャート。縦方向に%で積み上げる面(Area)チャート
ベジェラインチャート2
ベジェラインチャート
円(ドーナツ)チャート
散布図。useMarkerが必須。
始点と終点を結ぶライン上の振幅を塗るチャート

type

configオブジェクトへ記述

例

説明
ツールチップを使うかどうか
バーチャートのツールチップアンカーの色マーカーを使うかどうか

for line, bar, stacked%, area, stackedarea, stacked, pie
for line, bar, stacked%, area, stackedarea, stacked, pie

省略時は単位表示なし"千円"
unit.left > chartLeft - (unitXOffset || 10)
5
unit.top > chartTop - (unitYOffset || 12)
10"left"
unit.align > unitAlign || "right"
unit.unit > unitColor > extColor > textColors.unit > #aaa"#000""100 10px 'serif'" unit.font > unitFont > "100 12px 'Arial'""config":{"shadows":{"hanrei":["#22['#ddd', 3, 3, 3]
undefined['#ddd', 5, 10, 5] ['#222', 5, 5, 5]['#222', 6, 6, 6]['#444', 7, 7, 5]['#eee', 5, 5, 5]['#222', 5, 5, 5]['#aaa', 5, 3, 5]['#222', 5, 5, 5]['#222', 2, 2 2]['#222', 5, -5, 5]['#222', 5, 5, 5]['#222', 5, 5, 5]['#222', 3, 3 3]['#222', 5, 5, 5]['#222', 5, 5, 5]['#222', 5, 5, 5]

例

省略時

"yes"
"no"

http://ccchart.org/test/useVal-percent/test.htm
http://ccchart.org/test/useVal-percent/test.htm

例省略時

for bar (lineでは useMarker: 'css-maru' などで自動的にツールチップを使える)"yes" または "no"for bar"white"for line 値は "css-maru" "css-ring" "maru" など css-プレフィックスが付くものはDOM生成しCSS処理"css-ring""yes""rgba(0,0,0,0.7)""none"

configオブジェクトへ記述

プロパティ名

type

説明

例

省略時

デバッグ

wsInfowsDbg

booleanboolean

WebSocketの接続切断等簡単な情報出力
WebSocketの詳細なデバッグ用情報出力

true
true

false
false

WebSocket用

configオブジェクトへ記述
データ設定

プロパティ名type

useFirstToColName boolean
useFirstToRowNameboolean
maxY
numberdata自体はminY
number"data"配列
numberとして記述する roundedUpMaxY
maxX
numberminX
numberroundedUpMaxX
numberデータ

colorSet

Noteメソッド & プロパティ

名称初期化

init

グローバル設定 base (add v1.06+)

メモ

memo

array

説明例

省略時

trueならデータ配列の1行目を項目名とする for all chartTypes
trueならデータ配列の1列目を項目名とする for all chartTypes
データの最大値
データの最小値
maxYをどの位で切り上げるか for all chartTypes (0 か %表示の時は切り上げなし)
Xデータの最大値
for scatter
Xデータの最小値
for scatter
maxXをどの位で切り上げるか for scatter (0 か %表示の時は切り上げなし)

false
false
5000
200
1000
5000
2001000

true
true
データから算出
データから算出
100
データから算出
データから算出100

データ列の順に色付けするための配列["red","orange"]["red","#FF9114","#3CB000","#00A8A2","#0036C0","#C328FF","#FF34C0"]

省略時説明例

function

チャートの初期化

ccchart.init( 'hoge', chartdataObject )書式 ccchart.init(id, op[, callback])
戻値 ccchartオブジェクト
idstring,oj
引数
opobject ※上記configオブジェクト参照
callbackfunction

チャートを表示するcanvas要素または、そのid名
チャートオプションオブジェクト { "config": { ... }, "data": [ ... ] } の形式で指定
各チャートを描画後に発火するコールバック関数"hoge"

ccchart.base(mySets, 'black', {config:{useVal:'yes}})function

Webページ全体に係るチャートのグローバルデフォルト値ccchart.gcfを設定する

書式 ccchart.base(op0[, op1, op2,...opN])
戻値 ccchartオブジェクト
op0
string,oj
引数
opN
string,oj※優先順位： initのopやmemoのoj などによる個別設定 ＞ このグローバルなデフォルト値 ＞ もともとの各デフォルト値

function

ccchart.memo(id, memoOj )書式 ccchart.memo(memoObject)
戻値 ccchartオブジェクト
引数
memoOjobject

WebSocketws

必須
必須function(){alert('完了')} 省略可

init同様のチャートオプションオブジェクトまたは'white'など文字列で表現されたテーマ"black"省略時は テーマの 'default'
前のop引数の設定オブジェクトへ上書き追記されるオプション設定{config:{useShadow: 'no'} 省略可

val
left
top
font
align
lineTolineToColorlineToWidth
lineToXOffset
lineToYOffset

stringnumbernumber
font
align
Array
stringnumbernumbernumberfunction

ccchart.init( 'hoge', chartdataObject ).memo( memoObject )メモの内容必須"メモです"150
canvas左辺からの距離
lineTo または left & top のいずれか必須
200
canvas上辺からの距離
lineTo または left & top のいずれか必須
フォント"100 10px 'serif'""100 14px 'Arial'"
位置"center""left"
メモからチャートへ線を引く。 線分終点の [ データRowName, データColName ]で指定["ウーロン", "2011"] lineTo または left & top のいずれか必須
op.lineTo > op.color > config.textColor > "#ccc""orange"memoメソッドのプロパティlineTo時のline色
memoメソッドのプロパティlineTo時のline幅2
1
memoメソッドのプロパティlineTo時のメモ側のX位置
10 (0ならleft値と同じ) 50
memoメソッドのプロパティlineTo時のメモ側のY位置
10 (0ならtop値と同じ) 3WebSocketを接続する

ccchart.init( 'hoge', chartdataObject ).ws('ws://ccchart.com:8016')

書式 ccchart.ws(url[, op])
戻値 WebSocket接続インスタンス ※WebSocket 接続のインスタンスへは ccchart.wsRecent や ccchart.wsuids[uid] 、あるいは ccchart.getWs(op)などでアクセスできる。
WebSocketサーバーのURL"ws://ccchart.com:8016"
必須
引数
url
string
自動再接続フラグ
false
true
op
objectautoReConnect boolean
最大再接続回数35
maxReConnect
numberWbSocket のヘッダ Sec-WebSocket-Protocol に使われる文字列"mychart""ws.ccchart.com"
protocolstringwsRecent

object WebSocketwsuids

書式 ccchart.wsRecent
戻値 WebSocket接続インスタンス
プロパティ op.uid"-ccchart-ws-"で始まるWebSocketインスタンス毎の一意な UUID V4
string
この接続に紐ついている DOM要素の id名
op.id
string
接続先url すべて小文字で末尾の"/"を除去したスタイル
op.urlstringop.useHbboolean ハートビートを使うかどうか true/ false
ハートビート用文字列 configオブジェクトのプロパティ hbStr で設定
op.hbStrstringop.hbInterval number ハートビート文字列送信のインターバルミリ秒 configオブジェクトのプロパティ hbInterval で設定
op.hbTimer
number ハートビート文字列送信のインターバルタイマー ※通常は内部用(clearInterval(w.hbTimer) で手動停止も可能)
op.RTT
number ハートビートのサーバー往復ミリ秒 ラウンドトリップディレイタイム（Round-Trip delay Time）
onevent method (戻値 WebSocket) WbSocket APIの addEventListener ショートカット
その他new WbSocket で生成されるメソッドやプロパティすべて @see http://www.w3.org/TR/websockets/
hashccchart上で生成されたws接続インスタンスのリスト (UUID v4 を使用)

ccchart.wsuids['-ccchart-ws-d7f04e4d-c813-4337-8ccf-11a46eaa23ae']

書式 ccchart.wsuids['-ccchart-ws-'+uuidv4]※keyは"-ccchart-ws-"で始まりUUIDを接続した文字列

ccchart.wsuids[uid].hbStr

戻値 WebSocket接続インスタンスのリスト
hash※各インスタンスに含まれるプロパティは上記wsRecentのプロパティと同じ
ccchart上で生成されたws接続のリスト wses[id+'-ccchart-'+url]の書式

ccchart.wses["hoge8-ccchart-ws://ccchart.com:8014"]

wses (v1.01で廃止)

ccchart上で生成されたws接続の最新のインスタンス※id+urlではインスタンスdeleteが間に合わなかった場合などの新規接続生成時に衝突リスクがあるため廃止
wscasewsCloseByUid

ccchart.wsRecent.プロパティ名"-ccchart-ws-d7f04e4d-c813-4337-8ccf-11a46eaa23ae" 修正不可
"chart7"
修正不可"ws://ccchart.com:8021"
修正不可
false
true
"ping""Heartbeat"6000
min 5000 で 省略時は 60000
21
undefined エラー時は " - "ccchart.wsuids[uid].on('message', function(e){})idstring

WebSocketインスタンスを作成したccchartのcanvas id名on
その他 ws API

event
function

WbSocket APIの addEventListener ショートカット
ws.ccchart.com
new WbSocket で生成されるメソッドやプロパティすべて @see http://www.w3.org/TR/websockets/
WebSocketの受信パターン関数 ccchart.init( 'hoge', chartdataObject ).ws('ws://ccchart.com:8016').on('message', ccchart.wscase.oneColAtATime)

oneColAtATimefunction

一度に1列ずつ["23:41:47",58,41] といった配列で届く場合用

objectsomeColsAtATimefunction

wsCloseAll

ccchart.wsRecenthoge

読み取り専用["23:41:47",58,41]

function

一度に複数列ずつ届く場合[["製品A",435,600],["製品B",332,335],["製品C",524,584]]
ccchart.wsCloseAll()
ccchart.wsuids に登録されているすべての ws接続を閉じてインスタンスを削除する

function

引数で与えたUIDのWebSocket接続を閉じてインスタンスを削除する

ccchart.wsCloseByUid('-ccchart-ws-d7f04e4d-c813-4337-8ccf-11a46eaa23ae')

書式 ccchart.wsCloseByUid(uid)wsCloseById

戻値 ccchartオブジェクト
引数
uid
functionstringuuid "-ccchart-ws-"で始まりUUIDを接続した文字列-ccchart-ws-d7f04e4d-c813-4337-8ccf-11a46eaa23ae
必須
引数で与えたidに紐付いたWebSocket接続すべてを閉じてインスタンスを削除するccchart.wsCloseById('hoge0')

書式 ccchart.wsCloseById(id)wsCloseByUrl

戻値 ccchartオブジェクト
引数
idfunctionstring

DOMのid"hoge2"
必須
引数で与えたurlに紐付いたWebSocket接続すべてを閉じてインスタンスを削除するccchart.wsCloseByUrl('ws://ccchart.com:80')

書式 ccchart.wsCloseById(url)wsCloseByIdUrl

戻値 ccchartオブジェクト
引数
url
functionstring

WebSocketの接続先URL"ws://ccchart.com:80" 必須
与えたidかつURLに紐付いたWebSocket接続すべてを閉じてインスタンスを削除する
ccchart.wsCloseById('hoge0', 'ws://ccchart.com:80')

書式 ccchart.wsCloseById(id)wsDelTarget

戻値 ccchartオブジェクト
引数
id
url
functionstringstring

DOMのidWebSocketの接続先URL
引数で与えたWebSocketインスタンスを削除する"hoge2"
必須"ws://ccchart.com:80" 必須
ccchart.wsDelTarget(ccchart.wsuids['-ccchart-ws-d7f04e4d-c813-433****'])

削除する WebSocketインスタンス
引数で与えたUIDのWebSocketインスタンスを取得する

ccchart.getWs('-ccchart-ws-d7f04e4d-c813-433****')

書式 ccchart.wsDelTarget(target)

getWs

戻値 ccchartオブジェクト
引数
targetfunction

object WebSocket

必須

書式 ccchart.getWs(uid)
戻値 WebSocket
引数
uidstring

CSSマーカー サンプル http://ccchart.com/#67

取得したい WebSocketインスタンスの uid

WebSocketの受信パターン関数 http://ccchart.com/test/ws2.htm
ccchart.wscase.oneColAtAtime
一度に1列ずつ、たとえば、下記データの場合なら [["2013"],[435],[600]] といった配列で届く場合[["2013", "2014", "2015", "2016", "2017"],[ 435, 332, 524, 688, 774],[ 600, 335, 584, 333, 457]];

<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script><canvas id="hoge"></canvas><script>
var chartdata67 = {"config": {"title": "Option useMarker: css-ring","subTitle": "useMarkerにcss-ringを指定するとCanvasではなくCSSで輪を描きHoverします。","type": "line","useMarker": "css-ring","lineWidth": 8,"borderWidth": 7,"markerWidth": 28},
"data": [["年度",2007,2008,2009,2010,2011,2012,2013],["紅茶",435,332,524,688,774,825,999],["コーヒー",600,335,584,333,457,788,900],["ジュース",60,435,456,352,567,678,1260],["ウーロン",200,123,312,200,402,300,512]]

ccchart.init('hoge0', chartCfg0).ws('ws://ccchart.com:8021') //これ以降のチェーンスコープはWS.on('open', function(){ console.log('opend!') });.on('message', ccchart.wscase.oneColAtATime);//oneColAtATimeは、WebSocketの受信パターン関数

baseメソッド http://ccchart.org/test/base/base-v1.06.htm
Webパージ全体に係るチャートのグローバルデフォルト値ccchart.gcfを設定する//例1: ページ内のすべてのチャートのuseVal設定デフォルト値を'yes'にする
ccchart.base({config: {useVal: 'yes'}});
ccchart.init('hoge0', chartCfg0);//chartCfg0で uesVal: 'no'にしなければチャートに値が表示される
ccchart.init('hoge1', chartCfg1);//chartCfg0で uesVal: 'no'にしなければチャートに値が表示される//例2: ページ内のすべてのチャートの背景色を#fff'にしてshadowなどの色合いのデフォルト値もそれに合わせる
ccchart.base('white');//v1.06現在は他に'black'が使える必須