工具提示未按預期顯示時定製

Question

我正在處理angularjs谷歌圖表。我想定製工具提示。 在我的提示我要顯示的多個系列的數據以及一些文本顯示在演示https://plnkr.co/edit/orQchHKMeErVesXW2M0u?p=preview 我想看看傳說和工具提示中顯示的值旁邊的值的標題所示https://plnkr.co/edit/6iw39IRFY7mwdQzjAVR6?p=preview

在上述plunker中，我沒有自定義工具提示，所以它按預期工作，但是當我在工具提示中自定義文本時，如第一次plunker鏈接所示（1 - 7月替換爲第一系列...），工具提示不是如預期所示。 有何建議？

JS代碼：

'use strict'; 

angular.module('google-chart-example', ['googlechart']).controller("MainCtrl", function ($scope) { 

    var createChart = function (rows, label) { 
     return { 
      "type": "ColumnChart", 
      "data": { 
       "cols": [ 
        {"id": label, "label": label, "type": "string"},toolTipVar, 
        {"id": "count", "label": "count", "type": "number"}, 
        {"id": "pizza", "label": "Pizza", "type": "number"}, 
        {"id": "softdrink", "label": "Softdrink", "type": "number"} 
       ], 
       "rows": rows 
      }, 
      "options": { 
       "title": label, 
       "isStacked": "true", 
       focusTarget: 'category', 
       // "displayExactValues": true 
       "tooltip": {'text' : 'value' }, 
      } 
     } 
    }; 

    var toolTipVar = { 
     role: "tooltip", 
     type: "string", 
     p: { 
      'html': true 
     } 
    }; 

    var data = [ 
     {"c":[{"v":"First Series"},{"v":"Jan - July" + "\n" + "63" + "\n" + "30" + "\n" + "33"},{"v":63},{"v":"30"},{"v":"33"}]}, 
     {"c":[{"v":"Second series"},{"v":"Aug - Sept" + "\n" + "70" + "\n" + "35" + "\n" + "35"},{"v":70},{"v":"35"},{"v":"35"}]}, 
     {"c":[{"v":"Third series"},{"v":"Oct - Dec" + "\n" + "80" + "\n" + "40" + "\n" + "40"},{"v":80},{"v":"40"},{"v":"40"}]} 

    ]; 
    $scope.myChart = createChart(data, "Data Series"); 
}); 

Answer 1

如果你使用一個continuous axis（'number'，'date'，'timeofday'，等...）第一列，

可以提供提示值作爲格式化值（f:）

{"c":[{"v": 0, "f":"Jan - July"},{"v":63},{"v":"30"},{"v":"33"}]}, 

然後使用hAxis.ticks軸標籤
使用相同的對象表示法來設置

hAxis: { 
    ticks: [ 
    {"v": 0, "f":"First Series"}, 
    {"v": 1, "f":"Second Series"}, 
    {"v": 2, "f":"Third Series"} 
    ] 
}, 

其它選項被包括在下面的代碼段中的標籤值，
類似於使用離散軸線（'string'）

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

 
function drawChart() { 
 
    var data = new google.visualization.DataTable({ 
 
    "cols": [ 
 
     {"id": 'title', "label": 'title', "type": "number"}, 
 
     {"id": "count", "label": "count", "type": "number"}, 
 
     {"id": "pizza", "label": "Pizza", "type": "number"}, 
 
     {"id": "softdrink", "label": "Softdrink", "type": "number"} 
 
    ], 
 
    "rows": [ 
 
     {"c":[{"v": 0, "f":"Jan - July"},{"v":63},{"v":"30"},{"v":"33"}]}, 
 
     {"c":[{"v": 1, "f":"Aug - Sept"},{"v":70},{"v":"35"},{"v":"35"}]}, 
 
     {"c":[{"v": 2, "f":"Oct - Dec"},{"v":80},{"v":"40"},{"v":"40"}]} 
 
    ] 
 
    }); 
 

 
    options = { 
 
    title: 'title', 
 
    isStacked: true, 
 
    focusTarget: 'category', 
 
    hAxis: { 
 
     baselineColor: 'transparent', 
 
     gridlines: { 
 
     color: 'transparent' 
 
     }, 
 
     slantedText: false, 
 
     ticks: [ 
 
     {"v": 0, "f":"First Series"}, 
 
     {"v": 1, "f":"Second Series"}, 
 
     {"v": 2, "f":"Third Series"} 
 
     ] 
 
    }, 
 
    tooltip: { 
 
     text: 'value' 
 
    } 
 
    } 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.google.com/jsapi"></script> 
 
<div id="chart_div"></div>

圖表格式化

UPDATE

放置在角度以上變化...

var createChart = function (rows, label) { 
     return { 
      "type": "ColumnChart", 
      "data": { 
       "cols": [ 
        {"id": label, "label": label, "type": "number"}, 
        {"id": "count", "label": "count", "type": "number"}, 
        {"id": "pizza", "label": "Pizza", "type": "number"}, 
        {"id": "softdrink", "label": "Softdrink", "type": "number"} 
       ], 
       "rows": rows 
      }, 
      "options": { 
      title: 'title', 
      isStacked: true, 
      focusTarget: 'category', 
      hAxis: { 
       baselineColor: 'transparent', 
       gridlines: { 
       color: 'transparent' 
       }, 
       slantedText: false, 
       ticks: [ 
       {"v": 0, "f":"First Series"}, 
       {"v": 1, "f":"Second Series"}, 
       {"v": 2, "f":"Third Series"} 
       ] 
      }, 
      tooltip: { 
       text: 'value' 
      } 
      } 
     } 
    }; 

var data = [ 
    {"c":[{"v": 0, "f":"Jan - July"},{"v":63},{"v":"30"},{"v":"33"}]}, 
    {"c":[{"v": 1, "f":"Aug - Sept"},{"v":70},{"v":"35"},{"v":"35"}]}, 
    {"c":[{"v": 2, "f":"Oct - Dec"},{"v":80},{"v":"40"},{"v":"40"}]} 
    ];