简体   繁体   中英

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. 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

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): 在此处输入图片说明

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?

Can anyone help me out?

copied from this answer: 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. If you want to use things like trendlines and tooltips you need to use non material charts (eg packages['corechart'] and not packages['scatter']).

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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