NVD3.js 多条形图工具提示颜色
NVD3.js MultiBar Chart Tooltip color
我已经使用 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
相关文章:
- d3.js Chord图的动态工具提示
- Graphiti中是否有任何工具提示功能
- "工具提示"jQuery插件坏了
- 单元格的工具提示或标题不显示超过2000个字符
- d3.js用按钮更新条形图工具提示
- 使Intro.js工具提示响应
- 画布中绘制的矩形区域的弹出工具提示
- 使用CSS/JavaScript更改剑道图工具提示文本颜色
- 禁用NVD3 multiBarHorizontalChart中0值的工具提示
- 如何更改已显示的工具提示
- 如何在堆栈中创建具有不同颜色和自定义工具提示的堆积柱形图
- 尝试修改引导工具提示的工具提示颜色
- 在工具提示中将鼠标悬停时更改背景颜色
- NVD3.js 多条形图工具提示颜色
- 如何在图像库森时更改颜色和显示工具提示
- 更改工具提示颜色d3.js
- 更改ui.bootrap的工具提示箭头的颜色(附加了plunker)
- 如何使用jQuery UI工具提示在打开时更改工具提示颜色
- 如何在Highcharts中设置工具提示框的颜色
- 如何更改工具提示背景颜色