Javascript 谷歌可视化的多色折线图

我在我的项目中使用谷歌折线图，面临着一个问题，我需要改变一些线段的颜色，以可视化目标状态随时间的变化。应该是这样的：

我已经搜索了很长时间，但找不到一个方法来做谷歌图表。 我的解决方法是在图表中添加另一个系列，并根据状态将第二行eq的值交替设置为第一行，但这看起来很乏味。

有没有合适的方法？以下是我的解决方案示例：

函数drawMultipleTrendlineChart（）{
var图；
var data=new google.visualization.DataTable（）；
data.addColumn（'date'，'date'）；
data.addColumn（'number'，'Sales value A'）；
data.addColumn（'number'，'Sales value B'）；
data.addRows([
[新日期（2013年3月11日），200,0]，
[新日期（2013年4月2日），500,0]，
[新日期（2013年3月5日），700,0]，
[新日期（2013年4月6日），800800]，
[新日期（2013年5月7日），500500]，
[新日期（2013年6月8日），900,0]，
[新日期（2014年7月0日），800,0]，
[新日期（2014年8月1日），11001100]，
[新日期（2014年9月2日），10001000]，
[新日期（2014年2月10日）1000,0]，
[新日期（2014年3月11日），800,0]，
]);
var formatter=new google.visualization.NumberFormat({
分位数：2，
前缀：“R$：”
});
格式化程序。格式化（数据，1）；
var dateFormatter=new google.visualization.NumberFormat({
模式：“MM yyyy”
});
dateFormatter.format（数据，0）；
var chartHeight=400；
var-chartWidth=600；
var图表选项={
工具提示：{
isHtml：是的
},
标题：“具有多条线的趋势线”，
isStacked：是的，
宽度：图表宽度，
高度：图表高度，
颜色：['#0000D8'，'#00dddd']，
哈克斯：{
标题：“示例标题”，
斜体文字：假，
倾斜角度：45，
文本样式：{
字体大小：10
},
格式：“dd-MM-yyyy”
},
图表区：{
左:50,，
前20名，
宽度：（图表宽度-10），
高度：（图表高度-90）
}
};
chart=新的google.visualization.LineChart（document.getElementById（'multipleTrendChart'）；
绘制（数据、图表选项）；
}
load（'visualization'，'1'，'{
软件包：['corechart']，
回调：drawMultipleTrendlineChart
});
看了这个答案后，我尝试了一下，这对我来说很有效。答案是使用DataView API来操作数据


google.charts.load（'current'{
回调：DrawlineColor，
软件包：['corechart']
});
函数drawLineColors（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'number'，'X'）；
data.addColumn（'number'，'Blue Team'）；
data.addColumn（'number'，'Red Team'）；
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
变量选项={
图例：{
位置：'顶部'
},
EnableInteractive:false，
宽度：712，
身高：156，
背景颜色：{
填充：“透明”
},
curveType:'函数'，
哈克斯：{
标题：“时间”
},
言辞：{
标题：“团体金牌”
}
};
var dataView=newgoogle.visualization.dataView（数据）；
dataView.setColumns([
//按索引引用第一列
0,
//差异
{
计算：函数（数据，行）{
返回数据.getValue（第1行）；
},
键入：“编号”，
标签：“Y”
},
//色差
{
计算：函数（数据，行）{
var val=data.getValue（第2行）-data.getValue（第1行）；
如果（val>=0）{
返回“#0000FF”；
}
返回“#FF0000”；
},
键入：“字符串”，
角色：“风格”
}
]);
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
绘制图表（数据视图、选项）；
}
@Adriano我从一开始就写到我正在使用谷歌图表。检查这个答案-->