简体   繁体   English

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

[英]Google Charts - Custom Tooltip on Line Chart (Line Package) not Working

I'm using Google Charts (Visualization, 1.1, Line Package) to create a Simple Chart with 3 Lines and Month and Costs Axis.我正在使用谷歌图表(可视化,1.1,线包)创建一个简单的图表,包含 3 条线和月和成本轴。 Everything works fine, except Tooltip customization:一切正常,工具提示自定义除外:

Here's my code这是我的代码

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

You can test on JSFiddle您可以在JSFiddle上进行测试

When you Hover the first bottom line you'll get:当您将鼠标悬停在第一条底线时,您将获得: 在此处输入图片说明

But I Want to remove the Date on Top and Calculate Total Cost (Value * 2):但我想删除顶部的日期并计算总成本(值 * 2): 在此处输入图片说明

This is possible?这个有可能?

I already tried everything I could, search on Internet and try other codes but it looks like this isn't possible using th Line Package (Instead of CoreChart Package), is that right?我已经尽我所能,在互联网上搜索并尝试其他代码,但看起来使用 th Line Package(而不是 CoreChart Package)是不可能的,对吗?

Can anyone help me out?谁能帮我吗?

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

After looking deeper into Google's Material Chart information I found on their website:在深入研究了谷歌的材料图表信息后,我在他们的网站上找到了:

The Material Charts are in beta.材料图表处于测试阶段。 The appearance and interactivity are largely final, but the way options are declared is not.外观和交互性在很大程度上是最终的,但声明选项的方式不是。

Trendlines and tooltips fall under the options section of creating charts since they need the options structure to further define them.趋势线和​​工具提示属于创建图表的选项部分,因为它们需要选项结构来进一步定义它们。 Again, as of this date (March 2015) the Google Materials Charts do not support these features.同样,截至目前(2015 年 3 月),Google 材料图表不支持这些功能。 If you want to use things like trendlines and tooltips you need to use non material charts (eg packages['corechart'] and not packages['scatter']).如果你想使用趋势线和工具提示之类的东西,你需要使用非材料图表(例如包 ['corechart'] 而不是包 ['scatter'])。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM