如何在Google Chart双折线的所有数据点上持久显示数值？

问题分析 #

你之前的尝试存在两个核心错误：

• 错误地在series配置里直接添加role: 'annotation'，注释角色（annotation）需要作为独立的数据列绑定到对应系列，而非在series选项中设置。
• 仅为第一个折线系列添加了注释列，未处理第二个折线系列；且原DataView的列配置不完整，遗漏了其他柱状系列的列，导致图表显示异常。

正确实现方案 #

1. 用DataView添加双折线的注释列 #

为每个折线系列单独添加对应的注释列，同时保留所有柱状系列的列，确保ComboChart的完整结构。

2. 修正series配置 #

仅在series中指定系列类型为line，注释列会自动关联到前一个对应的数据列，无需额外配置role属性。

完整代码示例 #

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // 原始数据
  var data = google.visualization.arrayToDataTable([
    ['Date','New Errors','Value1','Value2','Value3','Value4','Value5','Value6','Value7','Value8','Value9','Value10','Value11','Value12','Value13','Value14','Value15'],
    ['2023-06-18',101,0,0,0,0,1,1,0,0,0,16,17,0,9,0,57],
    ['2023-06-19',141,34,1,0,1,6,25,0,0,0,7,13,0,14,0,74],
    ['2023-06-20',153,0,0,0,0,13,2,0,0,0,13,22,0,8,0,95],
    ['2023-06-21',138,90,0,0,0,23,1,0,0,0,8,13,0,9,0,84],
    ['2023-06-22',157,0,2,0,0,26,0,0,0,1,13,0,0,6,0,82],
    ['2023-06-23',122,72,0,0,0,23,1,2,0,0,11,0,1,0,0,57],
    ['2023-06-24',104,62,0,0,0,0,1,0,0,0,33,0,0,9,0,48],
    ['2023-06-25',94,57,0,0,9,0,0,0,0,0,6,0,0,6,0,53],
    ['2023-06-26',74,4,0,0,4,1,1,0,0,0,14,13,1,0,0,24],
    ['2023-06-27',13,0,0,0,0,0,0,0,0,0,6,0,0,4,0,2]
  ]);

  // 创建DataView，添加两个折线系列的注释列
  var view = new google.visualization.DataView(data);
  view.setColumns([
    0, // Date列
    1, // New Errors（第一条折线）
    {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },
    2, // Value1（第二条折线）
    {
      calc: "stringify",
      sourceColumn: 2,
      type: "string",
      role: "annotation"
    },
    // 保留所有柱状系列的列（索引3到16）
    3,4,5,6,7,8,9,10,11,12,13,14,15,16
  ]);

  var options = {
    title : 'Value',
    vAxis: {title: 'Value', minValue: 0},
    aggregationTarget: 'category',
    hAxis: {title: 'Day'},
    seriesType: 'bars',
    bar: { groupWidth: '75%' },
    isStacked: true,
    pointSize: 5,
    // 仅指定系列类型，注释由DataView的列自动关联
    series: {
      0: {type: 'line'},
      1: {type: 'line'}
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  // 传入DataView而非原始data
  chart.draw(view, options);
}

关键说明 #

• 注释列必须紧跟在对应的数据列之后，Google Charts会自动将注释绑定到前一个数据系列。
• 必须保留所有原始数据列（包括柱状系列），否则ComboChart的柱状部分会缺失。
• 无需在series配置中添加role属性，注释的角色由DataView的列定义决定。

内容的提问来源于stack exchange，提问作者Henke Olin