如何为Google折线图指定系列添加emphasis角色

要给第8列（Site列）添加emphasis效果，你需要在setColumns的配置中明确指定角色关联的数据列索引，正确写法如下：

view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, {sourceColumn: 8, role: 'emphasis'}]);

错误写法的问题说明 #

1. 第一种写法缺少sourceColumn属性：

   view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, {role:'emphasis'}]);
   

   该写法没有指定emphasis角色对应的数据列，图表无法识别要强调哪个系列，因此无效。

2. 第二种写法存在语法错误：

   view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, {8, role:'emphasis'}]);
   

   对象字面量中缺少键名，正确的键名应为sourceColumn，不能直接写数字索引。

完整示例代码 #

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

function drawChart() {
  // 构造数据表格
  var data = google.visualization.arrayToDataTable([
    ['Week', 'Receiving', 'Returns', 'Putaway', 'Picking', 'OB Shipping', 'Local Delivery', 'Shuttle', 'Site'],
    ['Week 13', 1.2912, 0.4478, 0.4818, 0.5712, 1.0184, 0.4309, 1.1566, 0.7591],
    ['Week 14', 1.8817, 0.2631, 0.8040, 0.6797, 1.0250, 0.6570, 1.0823, 0.8295],
    ['Week 15', 1.9633, 0.3892, 0.9402, 0.6583, 1.0564, 0.9698, 1.2444, 0.9130]
  ]);

  // 创建DataView并配置列与emphasis角色
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, {sourceColumn: 8, role: 'emphasis'}]);

  // 图表配置选项
  var options = {
    title: '周度指标趋势',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

  // 渲染图表
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}

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