2

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

这是一个非常相似的示例图形： 向图形添加工具提示

假设我正在使用该图。在我的例子中，值 106（2011 年）被 Growth 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”的三个值加上工具提示

你能帮我一把吗？谢谢！

4

1 回答 1

2

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

在此处输入图像描述

这是代码：

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"}};

于 2013-09-24T02:11:51.727 回答