先日紹介したccchartは沢山のエンジニアがブログや資料で公開しているので、比較的学習コストは低くなりそうです。
しかし、本家のWEBページでは、デモやサンプルを置いて、それをコピペして使ってくれと言わんばかりのサポート状態。
リファレンスがあってもいいかと思ったので、メモがてら記入しておきました。
設定
config
## チャート種類
"type": "line",
## 値を表示
"useVal": "yes",
## 背景色
"bg":"#FFF",
## 上パディング
"paddingTop" : 30,
## 右パディング(見出し分)
"paddingRight" : 140,
## 影
"useShadow" : "no",
## チャート(幅x高さ)
"width" : 900,
"height" : 300,
## マーカー種類
"useMarker" : "arc",
## マーカー大きさ
"markerWidth" : 24,
## テキスト色
"textColor" : "#333",
## 値の色
"valColor" : "#000",
## グラフ線の太さ
"lineWidth" : 8,
## マーカー詳細表示
"useMarker": "css-ring",
## データライン部分の線幅
"borderWidth": 6,
"lineYOffset" : 10,
## 値オフセット
"valYOffset" : 10,
## 値オフセット
"valXOffset" : -10,
## グラフタイトル
"title": "stackedArea Chart",
## サブタイトル
"subTitle": "積み上げ面チャート。縦方向に積み上げる面(Area)チャートです。",
## データ部分の色
"colorSet":["#666","#aaa","#5b7e91","#4c6cb3","#eee"],
//
"roundedUpMaxY": 100
dataプロパティ
配列の最初は見出しの配列です。簡易な書き方になるように気をつけましょう。
次の行からはデータ行で複数登録が可能です。
見出しも含めて書き方は最初のカラムが名称でそれ移行がデータになりますが、
見出しもデータも配列のカラム数は合わせるようにしましょう。
"data": [
["月",1,2,3,4,5,6,7,8,9,10,11,12],
["コーヒー",52,57,44,50,60,55,68,80,64,41,57,78],
["ジュース",30,45,56,40,80,68,76,90,75,52,57,55],
["ウーロン",20,23,12,20,42,50,72,63,30,20,32,50]
]
0 件のコメント:
コメントを投稿