谷歌图表，工具提示替换列值

Question

我正在使用google graph api（组合图表类型）中的组合图表。我想添加自定义工具提示以添加有关图表中每个点的信息，但其中一个值将替换为工具提示。

这是一个非常相似的示例图形： adding tooltip to graphs

假设我正在使用该图表。在我的情况下，值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'的三个值加上工具提示

你可以帮我一把吗？ 谢谢！

Answer 1

默认情况下，工具提示将替换该数据点的工具提示。它不会添加额外的工具提示。要解决此问题，您需要添加其他系列，并在该数据值中手动格式化工具提示。然后，您可以将其隐藏在图例中，并使其显示如下：

以下是代码：

function gcomboChart () {

  var data = new google.visualization.DataTable();

  //{v: x, f: y} allows you to set a manual format for each data point
  var dataVal =
      [
        ["January",37903,655396,3411359,{v: 0, f:"Tooltip January"}],
        ["February",33813,559595,3035931,{v: 0, f:"Tooltip February"}],
        ["March",54073,725638,4561690,{v: 0, f:"Tooltip March"}]
      ];

  data.addColumn('string','month');
  data.addColumn('number','Value1');
  data.addColumn('number','Value2');
  data.addColumn('number','Value3');
  // Changed to standard data rather than tooltip role
  data.addColumn('number','');

  data.addRows(dataVal);
  return(data);
}


//Here the code that generates the graph:


function drawVisualization() {
  var data = gcomboChart();
  var options = { focusTarget: 'category'};

  options["allowHtml"] = true;
  options["seriesType"] = "bars";
  // the below line makes sure the tooltip is not shown in the legend
  options["series"] = {0: {targetAxisIndex:0,type:"line"},3: {visibleInLegend:false}};
  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('visualization'));
  chart.draw(data,options);

}

^{注意：我应该将系列3切换到一条线，这样它就不会将杆推到一条线上。更改系列设置如下，使其看起来更好：options["series"] = {0: {targetAxisIndex:0,type:"line"},3: {visibleInLegend:false,type:"line"}};}