NVD3.js 多条形图工具提示颜色

NVD3.js MultiBar Chart Tooltip color

本文关键字:工具提示 颜色 条形图 js NVD3      更新时间:2023-09-26

我已经使用 e.color 将元素颜色添加到我的饼图工具提示文本中,但我似乎无法使用 MultiBar 图表访问相同的颜色数组。 有人知道为什么吗? 完全相同的工具提示代码适用于饼图中。

var colors = ['#5f9e5f', '#269abc', '#d58512', '#d43f3a'];
var test_data = [
    { key: "S", values: 
        [
            {series:0, y:38, x:'12/22/14'},
            {series:0, y:28, x:'12/23/14'},
            {series:0, y:22, x:'12/24/14'},
            {series:0, y:26, x:'12/26/14'},
            {series:0, y:34, x:'12/29/14'},
            {series:0, y:30, x:'12/30/14'},
            {series:0, y:35, x:'12/31/14'},
            {series:0, y:47, x:'01/02/15'},
            {series:0, y:59, x:'01/05/15'},
            {series:0, y:42, x:'01/06/15'}
        ]
    },
    { key: "M", values: 
        [
            {series:1, y:32, x:'12/22/14'},
            {series:1, y:42, x:'12/23/14'},
            {series:1, y:12, x:'12/24/14'},
            {series:1, y:26, x:'12/26/14'},
            {series:1, y:18, x:'12/29/14'},
            {series:1, y:39, x:'12/30/14'},
            {series:1, y:55, x:'12/31/14'},
            {series:1, y:57, x:'01/02/15'},
            {series:1, y:69, x:'01/05/15'},
            {series:1, y:62, x:'01/06/15'}
        ]
    },
    { key: "T", values: 
        [
            {series:2, y:8, x:'12/22/14'},
            {series:2, y:4, x:'12/23/14'},
            {series:2, y:2, x:'12/24/14'},
            {series:2, y:6, x:'12/26/14'},
            {series:2, y:4, x:'12/29/14'},
            {series:2, y:6, x:'12/30/14'},
            {series:2, y:5, x:'12/31/14'},
            {series:2, y:9, x:'01/02/15'},
            {series:2, y:19, x:'01/05/15'},
            {series:2, y:32, x:'01/06/15'}
        ]
    }
 ];
nv.addGraph(function() {
var chart = nv.models.multiBarChart()
    .stacked(true)
    .tooltips(true)
    .color(colors)
    .rotateLabels(-45)
    .tooltipContent(function(key, x, y, e, graph){
        return '<div class="tt-p">' + y + '</div><div class="tt-p" style="color:'+e.color+'">'+key+'</div><div class="tt-p">' + x + '</div>';
     });
chart.yAxis.tickFormat(d3.format(',f'));
d3.select('#test5')
    .datum(test_data)
    .transition().duration(1200)
    .call(chart);
nv.utils.windowResize(chart.update);
console.log('calling chart');
return chart;

});

这是通过使用 e 中的另一个对象来解决的。我用了e.series.color