Javascript 在c3js中使用字符串列作为工具提示
我有一个CSV文件,如下所示:Javascript 在c3js中使用字符串列作为工具提示,javascript,d3.js,tooltip,c3.js,Javascript,D3.js,Tooltip,C3.js,我有一个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","58f584d2c58d41f1266753
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"
我想添加最后一列(散列),它是一个字符串,当我在折线图上悬停时作为工具提示
下面的代码能够生成图形,但我无法添加“hash”列作为工具提示
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
}
});
}
}
您能帮我添加最后一列作为图表上所有数据点的工具提示吗?请尝试tooltip.format.value以使其正常工作。 提供一个回调函数,用于索引数据、格式化并返回要在工具提示覆盖中显示的值,如下所示 请将下面的代码复制粘贴到
谢谢如何更改哈希前面的键?当前,它显示“time”,我实际上想在悬停时显示所有值作为工具提示:time、hash和size您需要提供回调函数tooltip.format.name的实现来覆盖/格式化它。请参阅c3.js文档
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
}
});