Charts 谷歌图表如何在折线图中更改正负轴值的线条颜色

我试图用负值和正值绘制一个折线图，将其映射到具有相同颜色的相应象限上，但我想更改x轴上方和下方线条的颜色

        var data = new google.visualization.DataTable();
        data.addColumn("string", "Year");
        data.addColumn("number", "Effective Investible Surplus");            
        data.addRows(dataSet);
        this.formatNumber.format(data,1);//indian currency format
        var options = {
            legend: this.legendStyle,
            areaOpacity: 0.8,
            backgroundColor: '#f5f1e7',
            animation: {
                startup: true,
                duration: 300,
                easing: 'linear',
            },
            hAxis: {
                title: "Years",
                titleTextStyle: this.chartTitleText
            },
            vAxis: {
                title: "Rupees",
                titleTextStyle: this.chartTitleText,
                format: this.numberPattern
            },
            colors: ["#b3dda7"]
        };
        var chart = new google.visualization.AreaChart(
            document.getElementById("chart_div")
        );
        chart.draw(data, options);
    });

---

首先，要更改单个系列的颜色，
您需要使用

“样式”

角色。
我们可以使用带有计算列的数据视图来确定每行应该是哪种颜色

但是，由于面积图的绘制方式的性质，
您需要插入y轴值为0的行，
值与x轴交叉的每个位置。
否则，每种颜色都会将一个区域分割成两半

接下来，由于您正在使用字符串作为x轴（离散轴），
我们将在每个需要插入新行的位置重复标签

为了避免这种情况，我们可以使用值为2的选项

hAxis.showTextEvery

。
这将防止重复标签，
但也会导致一些标签不显示

请参阅以下工作片段

google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
变量数据集=[
['2010', 0],
['2011', 20],
['2012', -40],
['2013', 10],
['2014', -10],
['2015', 20],
['2016', 10],
['2017', -20],
['2018', 20],
['2019', -20]
];
//在该值与x轴相交的位置添加一个值零
对于（var i=（dataSet.length-1）；i>=0；i--）{
var val=数据集[i][1]；
如果（（i-1）>=0）{
var nextVal=数据集[i-1][1]；
如果（（val>=0）和&（nextVal<0））{
拼接（i，0，[dataSet[i][0]，0]）；
}如果（（val<0）和&（nextVal>=0））为else{
拼接（i，0，[dataSet[i][0]，0]）；
}
}
}
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Year'）；
data.addColumn（'数字'，'有效可投资盈余'）；
data.addRows（数据集）；
//创建数据视图以添加颜色
var dataView=newgoogle.visualization.dataView（数据）；
dataView.setColumns([
//包含x&y列索引
0, 1,
//添加计算的颜色
{
计算：函数（数据，行）{
var color='#b3dda7'；
var val=data.getValue（第1行）；
var-nextVal=0；
如果（行>0）{
nextVal=data.getValue（第1行，第1行）；
}
如果（（val<0）| |（（val==0）和&（nextVal<0）））{
颜色='#f08080'；
}
返回颜色；
},
键入：“字符串”，
角色：“风格”
}
]);
变量选项={
图例：“无”，
面积不透明度：0.8，
背景颜色：“#f5f1e7”，
动画：{
是的，
持续时间：300，
“线性”，
},
哈克斯：{
标题:"年",，
格式：'0000'，
showTextEvery:2
},
言辞：{
标题：“卢比”
}
};
var chart=新的google.visualization.AreaChart（document.getElementById（“chart”）；
绘制图表（数据视图、选项）；
});
首先，要更改单个系列的颜色，

您需要使用
“样式”
角色。

我们可以使用带有计算列的数据视图来确定每行应该是哪种颜色

但是，由于面积图的绘制方式的性质，

您需要插入y轴值为0的行，

值与x轴交叉的每个位置。

否则，每种颜色都会将一个区域分割成两半

接下来，由于您正在使用字符串作为x轴（离散轴），

我们将在每个需要插入新行的位置重复标签

为了避免这种情况，我们可以使用值为2的选项
hAxis.showTextEvery
。

这将防止重复标签，

但也会导致一些标签不显示

请参阅以下工作片段


google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
变量数据集=[
['2010', 0],
['2011', 20],
['2012', -40],
['2013', 10],
['2014', -10],
['2015', 20],
['2016', 10],
['2017', -20],
['2018', 20],
['2019', -20]
];
//在该值与x轴相交的位置添加一个值零
对于（var i=（dataSet.length-1）；i>=0；i--）{
var val=数据集[i][1]；
如果（（i-1）>=0）{
var nextVal=数据集[i-1][1]；
如果（（val>=0）和&（nextVal<0））{
拼接（i，0，[dataSet[i][0]，0]）；
}如果（（val<0）和&（nextVal>=0））为else{
拼接（i，0，[dataSet[i][0]，0]）；
}
}
}
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Year'）；
data.addColumn（'数字'，'有效可投资盈余'）；
data.addRows（数据集）；
//创建数据视图以添加颜色
var dataView=newgoogle.visualization.dataView（数据）；
dataView.setColumns([
//包含x&y列索引
0, 1,
//添加计算的颜色
{
计算：函数（数据，行）{
var color='#b3dda7'；
var val=data.getValue（第1行）；
var-nextVal=0；
如果（行>0）{
nextVal=data.getValue（第1行，第1行）；
}
如果（（val<0）| |（（val==0）和&（nextVal<0）））{
颜色='#f08080'；
}
返回颜色；
},
键入：“字符串”，
角色：“风格”
}
]);
变量选项={
图例：“无”，
面积不透明度：0.8，
背景颜色：“#f5f1e7”，
动画：{
是的，
持续时间：300，
“线性”，
},
哈克斯：{
标题:"年",，
格式：'0000'，
showTextEvery:2
},
言辞：{
标题：“卢比”
}
};
var chart=新的google.visualization.AreaChart（document.getElementById（“chart”）；
绘制图表（数据视图、选项）；
});

这正是我所需要的，非常感谢。还有一件事，我们是否可以在x轴下方设置chartArea的背景色？没有选项，但您可以