使用Google Charts组合图时为何出现多条折线？

我一眼就看出问题出在你对ComboChart系列的索引配置上！你现在的代码错误地把蜡烛图的其中一个数据列当成了折线系列，而不是你想要的“Avarage”列。

核心原因 #

Google Charts在计算数据系列索引时，会跳过角色列（比如你用的style角色）。看你的表头结构：

var header = [
  ['Category', 
   'Min',          // 数据系列0
   'Min Deviation',// 数据系列1
   'Max Divation', // 数据系列2
   'Max',          // 数据系列3
   { type: 'string', role: 'style' }, // 角色列，不计入系列索引
   'Avarage'       // 数据系列4
  ]
];

你原来的配置series: {1: {type: "line"}}把数据系列1（也就是Min Deviation列）设成了折线，这本来是蜡烛图的组成部分，自然会出现异常的折线。而你真正想作为折线的“Avarage”列对应的是数据系列4。

修复代码 #

只需要修改options里的series配置即可：

var options = {
  legend: 'none',
  hAxis: {
    title: 'Metrage',
    gridlines: { count: 7 },
    ticks: new Array(7).fill().map(function (val, i) {
      return { v: i, f: getMetrageCategoryString(i) };
    })
  },
  seriesType: "candlesticks",
  // 修正：指向Avarage列对应的系列索引
  series: { 4: { type: "line" } },
  animation: { duration: 1000, easing: 'out' },
};

额外说明 #

这样修改后，无论是regional还是national数据集，都会正确地把平均值列渲染成单条折线，和蜡烛图组合显示。以后如果调整数据列结构，记得要区分普通数据列和角色列，角色列不会占用系列索引哦。

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