[ccchart] ツールチップのCSSカスタマイズ

追記: 2013/06/13 テンプレートでカスタマイズする方法を実装中です(v1.06.5+) http://ccchart.org/test/tooltip-template/temp-jp.htm

ccchartの使い方を少しずつ書いてみることにしました。

ccchartは、ベースがCanvasの軽量チャートですが、CSSハイブリッドモードで動かすとインタラクティブなツールチップを使えるようになります。

CSSハイブリッドモードは、"useMarker": "css-ring" や "css-maru" などのCSSマーカーを使うと自動的に起動し、そのマーカーに触れると表示されます。

ccchartのツールチップ( http://jsgt.org/c/#67 )のHTMLは、下記ののようなclass構造になっています。したがってCSSでカスタマイズできます。

<div class="-ccchart-css-tooltip" id="-ccchart-css-tooltip-チャートのキャンバス名">
<span class="-ccchart-ttip-colnametitle">年度</span> 
<span class="-ccchart-ttip-colname">2007</span><br>
<span class="-ccchart-ttip-rowname">コーヒー</span><br>
<span class="-ccchart-ttip-data">600</span>
</div>

たとえば、こんな感じ。
http://jsfiddle.net/mYyxp/17/

HTMLはこう。

<script src="http://jsgt.org/c/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>​

JavaScriptはこんな感じ。

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("hoge", chartdata67);

そして、ツールチップ用のCSSをこんな感じで指定すると上記のような黄色いツールチップになります。

/* ツールチップ */
#-ccchart-css-tooltip-hoge{ line-height:1.3em;padding:8px;background:yellow }
#-ccchart-css-tooltip-hoge:before{top:55px}
.-ccchart-ttip-colnametitle{ 
    background: #333; color:#fff; 
    padding:2px; padding-left:10px; padding-right:10px;
}
.-ccchart-ttip-colname{ color: #555; font-weight: 900;}
.-ccchart-ttip-rowname{ color: green; }
.-ccchart-ttip-data{color: red ;font-size: 1.2em; }
.-ccchart-ttip-data:after {content: " 個";}