javascript - Google Charts - 折线图(折线包)上的自定义工具提示不起作用

标签 javascript charts google-visualization

我正在使用 Google 图表(可视化、1.1、线包)创建一个包含 3 条线以及月份和成本轴的简单图表。一切正常,除了工具提示自定义:

这是我的代码

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

这可能吗?

我已经尽我所能,在 Internet 上搜索并尝试其他代码,但使用 Line 包(而不是 CoreChart 包)看起来这是不可能的,对吗?

谁能帮帮我?

最佳答案

从这个答案复制:https://stackoverflow.com/a/29148517/4966682

在深入了解 Google 的 Material 图表信息后,我在他们的网站上找到了:

The Material Charts are in beta. The appearance and interactivity are largely final, but the way options are declared is not.

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

关于javascript - Google Charts - 折线图(折线包)上的自定义工具提示不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33619053/

相关文章:

android - MPAndroid 图表隐藏 X 轴的标签并在双击时显示

javascript - d3.js 如何向条形图添加线条

javascript - Google 可视化 - 第 0 行的行类型无效

javascript - 如何在 Google Table(或类似表)中包含迷你图和其他每行图形?

javascript - 为什么当我尝试从远程 html 页面获取元素时得到 "ECONNRESET"

JavaScript 不显示警报

javascript - 闭包:逐行解释 "Javascript: Good Parts"示例?

c# - 保存更高分辨率的图表而不会弄乱外观

javascript - 更改 Google 的 Geochart 可视化 api 中的图例

php - 格式化 json 数据以在 Flot 中使用