我正在使用google graph api(组合图表类型)中的组合图表 . 我想添加自定义工具提示以添加有关图表中每个点的信息,但其中一个值将替换为工具提示 .
这是一个非常相似的示例图形:adding tooltip to graphs
假设我正在使用该图表 . 就我而言, Value 106(2011年)被增长14%(工具提示值)取代
这里是生成数据的代码:
function gcomboChart () {
var data = new google.visualization.DataTable();
var dataVal =
[
["January",37903,655396,3411359,"Tooltip January"],
["February",33813,559595,3035931,"Tooltip February"],
["March",54073,725638,4561690,"Tooltip March"]
];
data.addColumn('string','month');
data.addColumn('number','Value1');
data.addColumn('number','Value2');
data.addColumn('number','Value3');
data.addColumn({type:'string', role:'tooltip'});
data.addRows(dataVal);
return(data);
}
//Here the code that generates the graph:
function drawChartComboChartID14cc19be5eef() {
var data = gcomboChart();
var options = { focusTarget: 'category'};
options["allowHtml"] = true;
options["seriesType"] = "bars";
options["series"] = {0: {targetAxisIndex:1,type:"line"}};
options["series"] = {0: {targetAxisIndex:2,type:"line"}};
options["vAxes"] = [{title:'Left Axis',format:'#,###',titleTextStyle:{color: 'orange'},textStyle:{color: 'orange'},textPosition:'out'},
{title:'Right Axis',format:'#,###',titleTextStyle:{color: 'blue'},textStyle:{color: 'blue'},textPosition:'out'}];
options["width"] = 1000;
options["height"] = 600;
options["pointSize"] = 9;
var chart = new google.visualization.ComboChart(
document.getElementById('ComboChart'));
chart.draw(data,options);
}
如果使用代码,您将看到第三个变量(Value3)的值被工具提示覆盖 . 我不知道如何解决这个问题 . 我想显示'Value1-3'的三个值加上工具提示
你能帮我个忙吗?谢谢!
1 回答
默认情况下,工具提示将替换该数据点的工具提示 . 它不会添加额外的工具提示 . 要解决此问题,您需要添加其他系列,并在该数据值中手动格式化工具提示 . 然后,您可以将其隐藏在图例中,并使其显示良好,如下所示:
这是代码:
注意:我应该将系列3切换到一条线,这样它就不会将杆推到一条线上 . 更改系列设置如下,使其看起来更好:options [“series”] = {0:{targetAxisIndex:0,type:“line”},3:{visibleInLegend:false,type:“line”}};