使用字符串列在c3js

Question

我有一個CSV文件，該文件是這樣的提示：

date,size,time,hash 
"2016-07-26T17:01:49","0","108.99","c3262c23c3538fd5b9b0f28fb3cbd239e466bb10" 
"2016-07-26T18:04:28","0","267.30","58f584d2c58d41f12667538e6a32ad2ce2975bf6" 
"2016-07-26T19:02:14","0","133.23","58f584d2c58d41f12667538e6a32ad2ce2975bf6" 
"2016-07-26T20:01:32","0","92.50","58f584d2c58d41f12667538e6a32ad2ce2975bf6" 
"2016-07-26T21:02:02","0","121.96","a5251ee2a52824ef69fc28b801bdb825c73308f4" 
"2016-07-26T22:01:39","0","98.96","a5251ee2a52824ef69fc28b801bdb825c73308f4" 

我想補充的最後一列（散），這是一個字符串作爲提示，當我將鼠標懸停上線圖表。

以下代碼能夠生成圖形，但我無法將「散列」列添加爲工具提示。

function generateChart(div, data){ 
     var chart = c3.generate({ 
      bindto: div, 

      data: { 
       x: 'date', 
       xFormat: '%Y-%m-%dT%H:%M:%S', 
       json: data, 
       type: 'line', 
       keys: { 
        x: 'date', 
        value: ['size', 'time'] 
       } 
      }, 
      axis:{ 
       x: { 
        type: 'timeseries', //date format in CSV file needs to be 2000-06-14 
        tick: { 
         format: '%m-%d %H:00' 
        } 
       } 
      }, 
      zoom: { 
       enabled: true 
      }, 
      subchart: { 
       show: true 
      } 
     }); 
    } 
} 

你能否幫我添加最後一列作爲圖表上所有數據點的工具提示？

Answer 1

嘗試tooltip.format.value得到這個工作。 提供一個回調函數來索引數據，格式並返回值以顯示在工具提示疊加中，如下所示。

請在c3.js example code

var data = [ 
{'date': "2016-07-26T17:01:49",'size': "0",'time': "108.99",'hash': "c3262c23c3538fd5b9b0f28fb3cbd239e466bb10"}, 
{'date': "2016-07-26T18:04:28",'size': "0",'time': "267.30",'hash': "58f584d2c58d41f12667538e6a32ad2ce2975bf6"}, 
{'date': "2016-07-26T19:02:14",'size': "38",'time': "133.23",'hash': "58f584d2c58d41f12667538e6a32ad2ce2975bf6"}, 
{'date': "2016-07-26T20:01:32",'size': "0",'time': "92.50",'hash': "58f584d2c58d41f12667538e6a32ad2ce2975bf6"}, 
{'date': "2016-07-26T21:02:02",'size': "0",'time': "121.96",'hash': "a5251ee2a52824ef69fc28b801bdb825c73308f4"}, 
{'date': "2016-07-26T22:01:39",'size': "0",'time': "98.96",'hash': "a5251ee2a52824ef69fc28b801bdb825c73308f4"}]; 


var chart = c3.generate({ 
    //bindto: div, 
    data: { 
     x: 'date', 
     xFormat: '%Y-%m-%dT%H:%M:%S', 
     json: data, 
     type: 'line', 
     keys: { 
      x: 'date', 
      value: ['size', 'time'] 
     } 
    }, 
    axis:{ 
     x: { 
      type: 'timeseries', //date format in CSV file needs to be 2000-06-14 
      tick: { 
       format: '%m-%d %H:00' 
      } 
     } 
    }, 
    tooltip: { 
     grouped: false, 
     format: { 
      //title: function (d) { return 'Data ' + d; }, 
      value: function (value, ratio, id, index) { 
       //var format = id === 'data1' ? d3.format(',') : d3.format('$'); 
       //console.log('index '+index+' ,value '+value+' ,tooltip'+data[index]); 
       //return format(value); 
       return data[index]['hash']; 
      } 
      // value: d3.format(',') // apply this format to both y and y2 
     } 
    }, 
    zoom: { 
     enabled: false 
    }, 
    subchart: { 
     show: false 
    } 
});