javascript - 为什么注释或工具提示没有出现在本系列中

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)。这四个点都应具有自定义工具提示或自定义工具提示和注释，但它仅适用于标记为“学期开始”的点，不适用于应标记为“新年”的点。

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'});