Google Line Chart未知异常线条问题排查求助

我完全懂你遇到的糟心事——单独渲染单色折线图时一切正常，合并后却平白无故冒出三条不该有的红、绿、蓝直线，这确实挺让人挠头的。

问题根源分析 #

你代码里的intervals: { 'style': 'line' }选项是罪魁祸首。Google Charts的intervals功能默认会为数据集生成置信区间线，而这些默认的区间线正好对应你看到的三色直线。单独渲染时可能因为数据规模或隐性配置差异没触发，但合并后这个配置就会生效，把多余的线显示出来。

解决方案 #

根据你的需求，有两种处理方式可选：

1. 直接移除intervals配置
   如果你压根不需要置信区间功能，最简单的办法就是把options里的intervals: { 'style': 'line' }这一行删掉。这样多余的直线会立刻消失，只保留你自定义颜色的折线。修改后的配置如下：

   var options = {
     height: 450,
     title: 'Monte Carlo',
     curveType: 'function',
     legend: 'none',
     backgroundColor: { fill:'transparent' },
     hAxis: { title: 'Bets', textStyle: { color: '#33465C' }, titleTextStyle: { color: '#33465C' } },
     vAxis: { title: 'Results', textStyle: { color: '#33465C' }, titleTextStyle: { color: '#33465C' } },
     titleTextStyle: { color: '#33465C' },
   };
   

2. 自定义intervals配置（若需保留区间功能）
   如果你确实需要使用intervals功能，可以通过配置属性来隐藏多余的线，或者让它和你的折线颜色统一。比如：

   intervals: {
     style: 'line',
     color: '#D3D3D3', // 和你的折线颜色保持一致
     lineWidth: 0 // 也可以设为0直接隐藏区间线
   }
   

额外验证点 #

另外，你用role:'style'为数据点指定颜色的配置是完全正确的，不用修改。只要调整好intervals的设置，就能正常显示你想要的单色折线了。

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