Google图表 - 折线图上的自定义工具提示(行包)无效

时间:2015-11-09 21:59:56

标签: javascript charts google-visualization google-chartwrapper

我正在使用Google Charts(可视化,1.1,行包)创建一个包含3行和月和成本轴的简单图表。一切正常,除了Tooltip定制:

这是我的代码

google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Month');
  data.addColumn('number', "Line 1");
  data.addColumn('number', "Line 2");
  data.addColumn('number', "Line 3");
  data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

  data.addRows([
    [new Date(2015, 5),  1000,  980, 800, 'Custom Content 1'],
    [new Date(2015, 6),  1100,  1000, 970, 'Custom Content 2'],
    [new Date(2015, 7),  1550,  1420, 1200, 'Custom Content 3'],
    [new Date(2015, 8),  1050,  1200, 930, 'Custom Content 4'],
    [new Date(2015, 9),  1280,  1120, 1070, 'Custom Content 5'],
    [new Date(2015, 10),  1100,  999, 880, 'Custom Content 6'],

  ]);

  var options = {
    chart: {
      title: 'Custom ToolTips',
      subtitle: 'not working!'
    },
    focusTarget: 'category',
    tooltip: {isHtml: true},
    width: 900,
    height: 500 
  };

  var chart = new google.charts.Line(document.getElementById('linechart_material'));
  chart.draw(data, google.charts.Line.convertOptions(options));
}

您可以在JSFiddle

上进行测试

当您悬停第一个底线时,您将获得: enter image description here

但我想删除顶部的日期并计算总费用(价值* 2): enter image description here

这可能吗?

我已经尽力了,在互联网上搜索并尝试其他代码,但看起来这不可能使用Line Package(而不是CoreChart Package),是吗?

任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:1)

从此回答中复制:https://stackoverflow.com/a/29148517/4966682

在深入了解我在其网站上找到的Google的重要图表信息之后:

  

材料图表处于测试阶段。外观和互动性   很大程度上是最终的,但声明选项的方式不是。

趋势线和工具提示属于创建图表的选项部分,因为它们需要选项结构来进一步定义它们。同样,截至2015年3月(2015年3月),Google Materials Charts不支持这些功能。如果你想使用趋势线和工具提示之类的东西,你需要使用非材料图表(例如包['corechart']而不是包['scatter'])。