[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] ]

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。