[Javascript] ccchartを使いこなせ! # 設定編

2016年4月20日

Javascript Tool テクノロジー プログラミング

先日紹介した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] ]