追記: 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: " 個";}