Javascript 在c3js中使用字符串列作为工具提示

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

我有一个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"
我想添加最后一列(散列),它是一个字符串,当我在折线图上悬停时作为工具提示

下面的代码能够生成图形,但我无法添加“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
    }
});