簡體   English   中英

Google 圖表 - 折線圖(折線包)上的自定義工具提示不起作用

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

我正在使用谷歌圖表(可視化,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上進行測試

當您將鼠標懸停在第一條底線時,您將獲得: 在此處輸入圖片說明

但我想刪除頂部的日期並計算總成本(值 * 2): 在此處輸入圖片說明

這個有可能?

我已經盡我所能,在互聯網上搜索並嘗試其他代碼,但看起來使用 th Line Package(而不是 CoreChart Package)是不可能的,對嗎?

誰能幫我嗎?

從這個答案復制: https : //stackoverflow.com/a/29148517/4966682

在深入研究了谷歌的材料圖表信息后,我在他們的網站上找到了:

材料圖表處於測試階段。 外觀和交互性在很大程度上是最終的,但聲明選項的方式不是。

趨勢線和​​工具提示屬於創建圖表的選項部分,因為它們需要選項結構來進一步定義它們。 同樣,截至目前(2015 年 3 月),Google 材料圖表不支持這些功能。 如果你想使用趨勢線和工具提示之類的東西,你需要使用非材料圖表(例如包 ['corechart'] 而不是包 ['scatter'])。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM