Javascript 在面积图、谷歌图表上用不同颜色绘制垂直线
我正在尝试绘制一个面积图，每个日期都有垂直线。我想用不同的颜色来表示每一行 详情请参考下图 请检查我下面的代码$会话变量包含表示图形的json数据Javascript 在面积图、谷歌图表上用不同颜色绘制垂直线,javascript,svg,google-visualization,jsapi,Javascript,Svg,Google Visualization,Jsapi,我正在尝试绘制一个面积图，每个日期都有垂直线。我想用不同的颜色来表示每一行 详情请参考下图 请检查我下面的代码$会话变量包含表示图形的json数据 $session = [["Date",{"role":"annotation"},"Value"],["2015-06-07",null,861],["2015-06-08",null,1381],["2015-06-09",null,2351],["2015-06-10",null,2125],["2015-06-11",null,1970]
$session =
[["Date",{"role":"annotation"},"Value"],["2015-06-07",null,861],["2015-06-08",null,1381],["2015-06-09",null,2351],["2015-06-10",null,2125],["2015-06-11",null,1970],["2015-06-12",null,1745],["2015-06-13",null,1079],["2015-06-14",null,1087],["2015-06-15",null,2221],["2015-06-16",null,2176],["2015-06-17","Test ",1918],["2015-06-18",null,1826],["2015-06-19",null,1720],["2015-06-20",null,937],["2015-06-21",null,1094],["2015-06-22",null,2170],["2015-06-23",null,2085],["2015-06-24",null,1952],["2015-06-25",null,1865],["2015-06-26",null,1674],["2015-06-27",null,977],["2015-06-28",null,1005],["2015-06-29",null,2130],["2015-06-30",null,1913],["2015-07-01",null,1774],["2015-07-02",null,1891],["2015-07-03",null,1572],["2015-07-04",null,979],["2015-07-05",null,1024],["2015-07-06",null,2163],["2015-07-07",null,2041]]
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawVisualization() {
var session_data = <?php echo $session_data; ?>;
for (var index = 0; index < session_data.length; index++) {
session_data[index][0] = new Date(session_data[index][0]);
}
var data = google.visualization.arrayToDataTable(session_data);
var chart = new google.visualization.AreaChart(document.querySelector('#linechart_material'));
chart.draw(data, {
width: 1600,
height: 600,
annotation: {
1: {
style: 'line',
color: 'black'
},
2:{
style: 'line',
color: 'blue'
}
},
vAxis: {
gridlines: {
color: 'none'
},
baselineColor: 'green'
},
hAxis: {
gridlines: {
color: 'none'
}
},
series: {
0: {color: '#e7711b'},
1: {color: '#e2431e'},
2: {color: '#f1ca3a'},
3: {color: '#6f9654'},
4: {color: '#1c91c0'},
5: {color: '#43459d'},
}
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawVisualization});
</script>
</head>
<body>
<div id="linechart_material"></div>
</body>
</html>
$session=
[[“日期”，{“角色”：“注释”}，“值”]，[“2015-06-07”，空，861]，“2015-06-08”，空，1381]，“2015-06-09”，空，2351]，“2015-06-10”，空，2125]，“2015-06-11”，空，1970]，“2015-06-12”，空，1745]，“2015-06-13”，空，1079]，“2015-06-14”，空，1087]，“2015-06-15”，空，2221]，“2015-06-06-16”，空，2176]，“2015-06-17]，“测试”，空，1916-18,[“2015-06-19”，空，1720），“2015-06-20”，空，937），“2015-06-21”，空，1094），“2015-06-22”，空，2170），“2015-06-23”，空，2085），“2015-06-24”，空，1952），“2015-06-25”，空，1865），“2015-06-26”，空，1674），“2015-06-27”，空，977），“2015-06-28”，空，1005），“2015-06-29”，空，2130），“2015-06-30”，空，1913），“2015-07-01），“空，1771”，“2015-06-1891”2015-07-03，“空，1572]，“2015-07-04”，空，979]，“2015-07-05”，空，1024]，“2015-07-06”，空，2163]，“2015-07-07”，空，2041]]
函数drawVisualization（）{
var会话_数据=；
对于（var index=0；index请检查js fiddle-您需要
stemColorannotationsannotations: {
stemColor: 'red'
}
有关编辑注释的更多选项，请在chrome developer tools中查找文档。您可以研究呈现的
//*[@id="linechart_material"]/div/div[1]/div/svg/g[2]/g[1]/g[4]/rect
google.visualization.events.addListener（图表'ready'，函数（）{
var rect=document.getElementById（'linechart\u material'）
.querySelector（'svg'）
.querySelector（'g:n类型（2）'））
.querySelector（'g:n类型（1）'））
.querySelector（'g:n类型（4）'））
.querySelector（'rect'）
rect.setAttribute（'stroke'，'#FF0000'）；//红色
setAttribute（'stroke-width'，'5'）；//只是为了强调这一点
});
更新。正如我在上面所写的，如果有多条注释行，您只需要收集
google.visualization.events.addListener(chart, 'ready', function() {
var rects = document.getElementById('linechart_material')
.querySelector('svg')
.querySelector('g:nth-of-type(2)')
.querySelector('g:nth-of-type(1)')
.querySelector('g:nth-of-type(4)')
.querySelectorAll('rect')
for (var i=0;i<rects.length;i++) {
rects[i].setAttribute('stroke', getRandomColor());
rects[i].setAttribute('stroke-width', '5');
}
});
google.visualization.events.addListener（图表'ready'，函数（）{
var rects=document.getElementById（'linechart\u material'））
.querySelector（'svg'）
.querySelector（'g:n类型（2）'））
.querySelector（'g:n类型（1）'））
.querySelector（'g:n类型（4）'））
.querySelectorAll（'rect'）
对于（var i=0；i你能把它放在提琴上吗？如果这个提琴不起作用，它应该有什么帮助？你需要修复一些外部资源。@altocumulus-plz-chk，是的，你是对的，我想要多条不同颜色的垂直线。你能帮我更新答案吗。从这里开始。这很好，但我不想我们真的没有预定义的属性来做这件事吗？我已经看了一个多小时的文档了，是的@davidkonrad你是对的。stemColor
不会用不同的颜色给不同的线条上色。@patel，我不知道有什么内置的功能可以做到这一点。谷歌可视化是不可能的在这些方面可以定制，或者可能有些人要求太高：）有几十个甚至上百个未回答的问题，以最独特的方式针对不同的颜色，不同的注释布局，不同位置的线条等等。我相信这是谷歌方面的一个积极选择——这将是一个巨大的任务