在 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"

当我将鼠标悬停在折线图上时，我想添加最后一列（哈希）作为工具提示的字符串。

以下代码能够生成图表，但我无法将“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
            }
        }); 
    }
}

您能帮我添加最后一列作为图表上所有数据点的工具提示吗？

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
    }
});