en | jp

テンプレートでカスタマイズされたツールチップ

テンプレート記法を用いたカスタマイズです。シンプルなCSSカスタマイズの方法はここ (http://qiita.com/items/fae3937363d1bb1b8090) *japaneseをご覧ください。

下記デモでは、data2 に対する data1 のパーセント値 data3 を作り、それらのデータをカスタマイズしたツールチップへ表示しています。

data1, data2 and data3 (%: data1*100/data2で計算したパーセント)

<script>

ccchart.base('white');

var data1 = [
    ["月",1,2,3,4,5,6,7,8],
    ["ウーロン",20,23,12,20,42,50,43,56],
    ["コーヒー",52,50,44,50,60,55,68,80]
];

var data2 = [
    ["月",1,2,3,4,5,6,7,8],
    ["ウーロン",80,150,120,120,100,80,100,140], 
    ["コーヒー",100,120,150,260,180,150,170,220]
];

var data3 = mkPercentArry(data1, data2);

function mkPercentArry(molecular, denominator){
  var header = molecular[0];
  var body1 = molecular.slice(1);
  var body2 = denominator.slice(1);
  var percentAry = [];
  var percent = 0;

  percentAry.push(header);
  for(var row = 0; row < body1.length   ; row++){
    percentAry_wk = [];
    percentAry_wk.push(body1[row][0])
    for(var col = 1; col < body1[row].length  ; col++){
      percent = Math.round(body1[row][col] * 100/body2[row][col] );
      percentAry_wk.push(percent);
    }
    percentAry.push(percentAry_wk);
  }
  return percentAry;
}
</script>

Demo: default ツールチップ

<canvas id="hoge0-3"></canvas>
<script>

var conf = {
    "title": "default tooltip",
    "type": "bar",
    "width": 500,
    "height": 380,
    "minY": 0,
    "maxY": 100,
    "useToolTip": "yes",
    "useVal": "yes"
};


ccchart
  .base('white')
  .init('hoge0-3', {
    "config": conf,
    "data": data1
  })
</script>

Demo: カスタマイズされたツールチップ

<canvas id="hoge0-4"></canvas>
<script>
    
var conf = {
    "title": "customized tooltip",
    "unit": {
      "unit": "%",
      "left": 15,
      "top": 60,
      "align": "left",
      "color": "#888",
      "font": "100 12px 'Arial'"
    },
    "type": "bar",
    "width": 500,
    "height": 380,
    "minY": 0,
    "maxY": 100,
    "useToolTip": "yes",
    "cssTooltip":  { 
      "width": "280px",
      "border": "1px solid rgba(180,180,180,0.7)",
      "background-color": "rgba(180,180,180,0.3)",
      "font-size": "18px",
      "line-height": "11px",
      "padding": "12px",
      "text-align": "center",
      "text-shadow": "0px"
    },
    "tmpToolTip": ""
        + "<h1 style='padding-top:0px;'>custom</h1><h3>{{rowName}}</h3>"
        + "{{colNamesTitle}}{{colName}} :: {{data3}} % ( {{data}}t / {{data2}}t )",
    "useVal": "yes"
};

ccchart
  .init('hoge0-4', {
    "config": conf,
    "data": data1
  })
</script>

オプション useToolTip

"useToolTip": "yes"| none

オプション cssTooltip

config

 "cssTooltip":  { 
      "width": "280px",
      "border": "1px solid rgba(180,180,180,0.7)",
      "background-color": "rgba(180,180,180,0.3)",
      "font-size": "18px",
      "line-height": "11px",
      "padding": "12px",
      "text-align": "center",
      "text-shadow": "0px"
    }

output


オプション tmpToolTip

config

"tmpToolTip": ""
        + "<h1 style='padding-top:0px;'>custom</h1><h3>{{rowName}}</h3>"
        + "{{colNamesTitle}}{{colName}} :: {{data3}} % ( {{data}}t / {{data2}}t )"

output

<div class="-ccchart-css-tooltip" id="-ccchart-css-tooltip-hoge0-4" style="background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 0.6) 0%, rgba(255, 255, 255, 0.6) 50%); left: 379.25px; top: -42.265625px;"><h1 style="padding-top:0px;">custom</h1><h3><span class="-ccchart-ttip-rowname">コーヒー</span></h3><span class="-ccchart-ttip-colNamesTitle">月</span> <span class="-ccchart-ttip-colname">8</span> :: <span class="-ccchart-ttip-data3">36</span> % ( <span class="-ccchart-ttip-data">80</span>t / <span class="-ccchart-ttip-data2">220</span>t )</div>
*FYI. [2][8] is the current point of mouseover on the ccchart

テンプレート記法

Variable

*FYI. ccchart.op.data[0][0] は ccchart.ops['hoge0-4'].op.data[0][0] などのように書くこともできます。

Array (placeholder)

* ArrayName is name of the Array that is the other chart data. it is a 2d-Array like [ ["月",1,2,3,4,5,6,7,8], ["ウーロン",20,23,12,20,42,50,43,56], ["コーヒー",52,50,44,50,60,55,68,80] ];