Question

我目前正在测试谷歌图表，并且难以指定我自己的自定义工具提示。

我的数据声明如下

var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});

data.addRows([0, 0, 0, 'hello'], [1, 10, 5, 'hello'],  
[2, 23, 15, 'hello'],[3, 17, 9, 'hello'],  [4, 18, 10, 'hello'],  
[5, 9, 5, 'hello'],

请参阅此jsFiddle http://jsfiddle.net/SecretSquirrel/rbwyhx1q/

自定义工具提示似乎只影响第一个数据列？

我认为它非常有限，每行只允许1个工具提示，但如果这只是第一列的1个工具提示，这真的很无用。

Answer 1

您必须为第二次移植添加另一个工具提示列。

＆＃13;

google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Dogs');
      data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
      data.addColumn('number', 'Cats');
      data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
        
      data.addRows([
          [0, 0,'custom', 0, 'hello'],   [1, 10,'custom', 5, 'hello'],  [2, 23,'custom', 15, 'hello'],
        [3, 17,'custom', 9, 'hello'],  [4, 18,'custom', 10, 'hello'],  [5, 9,'custom', 5, 'hello'],
        [6, 11,'custom', 3, 'hello'],  [7, 27,'custom', 19, 'hello'],  [8, 33,'custom', 25, 'hello'],
        [9, 40,'custom', 32, 'hello'],  [10, 32,'custom', 24, 'hello'], [11, 35,'custom', 27, 'hello'],
        [12, 30,'custom', 22, 'hello'], [13, 40,'custom', 32, 'hello'], [14, 42,'custom', 34, 'hello'],
        [15, 47,'custom', 39,'hello'], [16, 44,'custom', 36,'hello'], [17, 48,'custom', 40, 'hello'],
        [18, 52,'custom', 44,'hello'], [19, 54,'custom', 46,'hello'], [20, 42,'custom', 34, 'hello'],
        [21, 55,'custom', 47,'hello'], [22, 56,'custom', 48,'hello'], [23, 57,'custom', 49,'hello']
      ]);


      var options = {
        width: 1000,
        height: 563,
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Popularity'
        },
        series: {
          1: {curveType: 'function'}
        }
      };

      var chart = new google.visualization.LineChart(document.getElementById('ex2'));

      chart.draw(data, options);
    }

＆＃13;

   <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
    
          <div id="ex2"></div>

＆＃13;

如何为Google Line Chart中的每个系列制作自定义工具提示

1 个答案: