gpt4 book ai didi

javascript - 如何在堆栈中创建具有不同颜色和自定义工具提示的堆积柱形图?

转载 作者:行者123 更新时间:2023-11-29 21:52:11 25 4
gpt4 key购买 nike

我正在尝试使用 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: 设置来获得您想要的结果。

这是一个看起来像你想要的 fiddle ,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(); }

关于javascript - 如何在堆栈中创建具有不同颜色和自定义工具提示的堆积柱形图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28579037/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com