Question

我使用谷歌可视化设置了折线图。在图表数据表中，我添加了一个注释和工具提示列，如下所示。

data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'tooltip'});

对于4个数据行，我已经为注释指定了一个值，但它似乎只适用于这四个数据行中的两个。

查看问题的最简单方法是访问： https://code.google.com/apis/ajax/playground/?type=visualization#line_chart

用下面的代码替换所有代码，然后点击“运行代码”

function drawVisualization() {

// Create the data table.
var data = new google.visualization.DataTable();
//add columns
data.addColumn('datetime', 'TheDates');data.addColumn('number', 'Metric A');
data.addColumn('number', 'Metric B');data.addColumn('number', 'Metric C');
data.addColumn('number', 'Metric D');data.addColumn('number', 'Metric E');
data.addColumn('number', 'Metric F');data.addColumn('number', 'New Year');
data.addColumn('number', 'Term Start');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'tooltip'});

data.addRows([[new Date(2014,4,29), 1, 5, 7, 2, 2, 0, null, null, null, null], 
             [new Date(2014,4,14), 0, 4, 7, 2, 0, 0, null, null, null, null], 
             [new Date(2013,10,24), 0, 2, 0, 0, 0, 0, null, null, null, null], 
             [new Date(2013,4,23), 0, 0, 0, 0, 0, 0, null, null, null, null], 

             [new Date(2013,9,1), null, null, null, null, null, null, null, 0, null, 'Term Start (01/09/2013)'], 
             [new Date(2013,9,1), null, null, null, null, null, null, null, 10, 'Term Start', 'Term Start (01/09/2013)'], 

             [new Date(2014,1,1), null, null, null, null, null, null, 0, null, null, 'New Year (01/01/2014)'], 
             [new Date(2014,1,1), null, null, null, null, null, null, 10, null, 'New Year', 'New Year (01/01/2014)']
           ]);

// Set chart options
var options = {
  'title': '',
  'width': 800,
  'height': 500,
  'seriesType': "line",
  'vAxis.maxValue': 10,
  'vAxis.minValue': 0,
  'pointSize': 3,
  'tooltip.isHtml': true,
  series: {6:{'visibleInLegend': false, 'pointSize': 0, 'color': '#000000'}, 7:{'visibleInLegend': false, 'pointSize': 0, 'color': '#000000'}}
};

 // Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
chart.draw(data, options);

}

跑完后，你会看到两条垂直线。这是由两个数据点组成的两个系列（来自数据行5,6,7和8）。这四个点应该都有自定义工具提示或自定义工具提示和注释，但它只适用于标记为“Term start”的那个，而不适用于应标记为“New Year”的那个。

Answer 1

您要注释或更改工具提示的每个数据系列都需要其自己的注释列和/或工具提示列：

var data = new google.visualization.DataTable();
//add columns
data.addColumn('datetime', 'TheDates');
data.addColumn('number', 'Metric A');
data.addColumn('number', 'Metric B');
data.addColumn('number', 'Metric C');
data.addColumn('number', 'Metric D');
data.addColumn('number', 'Metric E');
data.addColumn('number', 'Metric F');
data.addColumn('number', 'New Year');
// annotation and tooltip columns for "New Year"
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Term Start');
// annotation and tooltip columns for "Term Start"
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'tooltip'});

为什么注释或工具提示不会出现在此系列中

1 个答案: