Charts 谷歌图表中的Higlight单网格线

在谷歌图表中，是否有可能在折线图上突出显示y轴的一条网格线，即使用不同的颜色或画得更厚

示例它应该是什么样子：

是的，你能做到

JS

      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable
            ([['X', 'Style 1', 'Syle 2',
               'Style 3'],
              [1, 2, 3, 4],
              [2, 3, 4, 5],
              [3, 4, 5, 6]
        ]);

        var options = {
          hAxis: { maxValue: 5 },
          vAxis: { maxValue: 5 },
          chartArea: { width: 380 },

          series: {
            0: { lineWidth: 4 },
            1: { lineDashStyle: [2, 2] },
            2: { lineDashStyle: [4, 4] }
          },
           colors: ['#aa1221', '#0e2e22', '#6feee4']
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
}

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

详细阅读您可以修改的内容

是的，您可以这样做

JS

      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable
            ([['X', 'Style 1', 'Syle 2',
               'Style 3'],
              [1, 2, 3, 4],
              [2, 3, 4, 5],
              [3, 4, 5, 6]
        ]);

        var options = {
          hAxis: { maxValue: 5 },
          vAxis: { maxValue: 5 },
          chartArea: { width: 380 },

          series: {
            0: { lineWidth: 4 },
            1: { lineDashStyle: [2, 2] },
            2: { lineDashStyle: [4, 4] }
          },
           colors: ['#aa1221', '#0e2e22', '#6feee4']
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
}

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

---

详细阅读您可以修改的内容您可以在图表的

'ready'

事件中手动更改网格线

这些行将由svg

元素表示，
y轴网格线将具有

height=“1”

和

fill=“#cccc”

（默认情况下）
对于双y形图表，每个网格线将有2个

元素

请参阅以下工作片段

google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var data=google.visualization.arrayToDataTable([
['x'，'y0'，'y1']，
[1, 2, 300],
[2, 3, 400],
[3, 4, 500]
]);
变量选项={
图表区：{
高度：“100%”，
宽度：“100%”，
前48名，
左：48，
右：64，
底数：48
},
颜色：['#aa1221'、'#0e2e22'、'#6feee4']，
高度：“100%”，
系列：{
1: {
目标指数：1
}
},
宽度：“100%”，
};
var container=document.getElementById（'chart_div'）；
var chart=新的google.visualization.LineChart（容器）；
google.visualization.events.addListener（图表'ready'，函数（）{
var gridlines=container.getElementsByTagName（'rect'）；
var highlightIndex=2；
var-lineIndex=0；
var-lineCount=0；
//确定网格线的数量
Array.prototype.forEach.call（网格线，函数（线）{
如果（（line.getAttribute（'height'）=='1'）&&（line.getAttribute（'fill'）=='cccc'））{
lineCount++；
}
});
//双y图上的网格线加倍
lineCount=lineCount/2；
//更改网格线
Array.prototype.forEach.call（网格线，函数（线）{
如果（（line.getAttribute（'height'）=='1'）&&（line.getAttribute（'fill'）=='cccc'））{
如果（lineIndex==highlightIndex）{
//变色
line.setAttribute（'fill'，'#4a148c'）；
//更改“宽度”
line.setAttribute（'height'，'5'）；
//以原始y坐标为中心
line.setAttribute（'y'，parseFloat（line.getAttribute（'y'））-2）；
}
lineIndex++；
如果（lineIndex>=行数）{
lineIndex=0；
}
}
});
});
图表绘制（数据、选项）；
window.addEventListener（'resize'，函数（）{
图表绘制（数据、选项）；
}，假）；
});
html，正文{
身高：100%；
保证金：0px 0px 0px 0px；
溢出：隐藏；
填充：0px 0px 0px 0px；
}
.图表{
身高：100%；
}
您可以在图表的
'ready'
事件中手动更改网格线

这些行将由svg
元素表示，

y轴网格线将具有
height=“1”
和
fill=“#cccc”
（默认情况下）

对于双y形图表，每个网格线将有2个
元素

请参阅以下工作片段


google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var data=google.visualization.arrayToDataTable([
['x'，'y0'，'y1']，
[1, 2, 300],
[2, 3, 400],
[3, 4, 500]
]);
变量选项={
图表区：{
高度：“100%”，
宽度：“100%”，
前48名，
左：48，
右：64，
底数：48
},
颜色：['#aa1221'、'#0e2e22'、'#6feee4']，
高度：“100%”，
系列：{
1: {
目标指数：1
}
},
宽度：“100%”，
};
var container=document.getElementById（'chart_div'）；
var chart=新的google.visualization.LineChart（容器）；
google.visualization.events.addListener（图表'ready'，函数（）{
var gridlines=container.getElementsByTagName（'rect'）；
var highlightIndex=2；
var-lineIndex=0；
var-lineCount=0；
//确定网格线的数量
Array.prototype.forEach.call（网格线，函数（线）{
如果（（line.getAttribute（'height'）=='1'）&&（line.getAttribute（'fill'）=='cccc'））{
lineCount++；
}
});
//双y图上的网格线加倍
lineCount=lineCount/2；
//更改网格线
Array.prototype.forEach.call（网格线，函数（线）{
如果（（line.getAttribute（'height'）=='1'）&&（line.getAttribute（'fill'）=='cccc'））{
如果（lineIndex==highlightIndex）{
//变色
line.setAttribute（'fill'，'#4a148c'）；
//更改“宽度”
line.setAttribute（'height'，'5'）；
//以原始y坐标为中心
line.setAttribute（'y'，parseFloat（line.getAttribute（'y'））-2）；
}
lineIndex++；
如果（lineIndex>=行数）{
lineIndex=0；
}
}
});
});
图表绘制（数据、选项）；
window.addEventListener（'resize'，函数（）{
图表绘制（数据、选项）；
}，假）；
});
html，正文{
身高：100%；
保证金：0px 0px 0px 0px；
溢出：隐藏；
填充：0px 0px 0px 0px；
}
.图表{
身高：100%；
}