如何在堆栈中创建具有不同颜色和自定义工具提示的堆积柱形图
How to create Stacked Column Chart with different colors and custom tooltips in a stack?
我正在尝试使用Google Visualization创建一个每列有两个序列的堆叠柱状图。从本质上讲,我展示的是一些储罐的数据,每列的下半部分显示当前储罐中的体积信息,上半部分显示要填充储罐的剩余体积信息。
我希望能够分别为每列的两个部分设置颜色和工具提示,但我一直无法找到解决方案。这是我目前的例子:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart', 'controls']}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('string','Element');
data.addColumn('number', 'FillRate');
data.addColumn('number', 'PotentialFill');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type: 'string', role: 'tooltip'});
data.addRow(['Tank1', 60, 40, "blue", "Some tooltip"]);
var chartchart0 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart0',
dataTable: data,
view: { columns: [0,1,2,3,4], },
options: {
title: 'Tanks', tooltip: { isHtml: true }, legend: 'none', vAxis: { textPosition: 'out', title: '% Filled', maxValue: 100, minValue: 0 }, hAxis: { textPosition: 'out', title: 'Tanks' }, isStacked: true
}});
chartchart0.draw(); }
</script>
我尝试过设置两个样式列,但它似乎只影响每个列的顶部。
您可以通过为其他工具提示和样式添加更多列,并删除选项中的view:
设置来获得所需的结果。
这是一把看起来像你想要的小提琴,http://jsfiddle.net/c5nwt1n4/1/和下面的代码!
google.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('string','Element');
data.addColumn('number', 'FillRate');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'PotentialFill');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type: 'string', role: 'tooltip'});
data.addRow(['Tank1', 60, "color:green", "Filled up",40, "color:blue", "could be filled"]);
var chartchart0 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart0',
dataTable: data,
options: {
title: 'Tanks',
tooltip: { isHtml: true },
legend: 'none',
vAxis: { textPosition: 'out', title: '% Filled', maxValue: 100, minValue: 0 },
hAxis: { textPosition: 'out', title: 'Tanks' },
isStacked: true
}
});
chartchart0.draw(); }
相关文章:
- 在自定义坐标处获取RaphaelJS元素的颜色填充
- 柱形图中每列的 ng-谷歌图表自定义颜色
- 如何在mozilla firefox扩展中更改自定义工具栏按钮的颜色
- 设计颜色自定义程序
- JQPLOT 根据标签名称为饼图设置自定义颜色
- 如何在 gmap v3 中对图标使用自定义颜色
- JustGage 中的自定义颜色无法正常工作
- C3js 行数据,自定义颜色
- 如何流畅地制作动画、自定义颜色和控制 jQuery UI 进度条
- CKeditor-自定义颜色
- 检查用户是否在浏览器中设置了自定义颜色
- 导航栏/菜单未使用Safari以自定义颜色显示(其他浏览器中的正确颜色)
- 有没有办法在HTML 5中自定义颜色选择器?
- 创建自定义颜色集TinyMCE
- 自定义颜色选择器TinyMCE
- 如何在vis.js中为堆叠条形图定义自定义颜色?
- 将自定义颜色添加到w2ui单元格[网格]
- HighCharts:如何将自定义颜色与渐变相结合
- 拉斐尔演示饼图调整添加自定义颜色
- ExtJS 4菜单颜色选择器中的自定义颜色(Ext.menu.ColorPicker)