Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@toshirot

[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でカスタマイズできます。

ccchartのツールチップ

<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/

ccchartのツールチップ

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: " 個";}
8
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
8
Help us understand the problem. What is going on with this article?