Question

我已经使用e.color将元素颜色添加到我的饼图工具提示文本中，但我似乎无法使用MultiBar图表访问相同的颜色数组。任何人都知道为什么？完全相同的工具提示代码在PieChart中有效。

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;

}）;

Answer 1

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

NVD3.js MultiBar Chart工具提示颜色

1 个答案: