Javascript 谷歌组合图-具有多条条形和线条的区间_Javascript_Charts_Google Visualization_Multiple Columns_Intervals

Javascript 谷歌组合图-具有多条条形和线条的区间

javascript charts google-visualization

Javascript 谷歌组合图-具有多条条形和线条的区间,javascript,charts,google-visualization,multiple-columns,intervals,Javascript,Charts,Google Visualization,Multiple Columns,Intervals,我正在尝试创建一个包含多个条形和线条的组合图。由于这些线是平均值，我还想添加最小和最大误差条。谷歌把这些称为“间隔” 问题是这些线与钢筋的中心对齐（在两者之间，这很好），但这些线的间隔似乎与第一根钢筋对齐。看我的例子。我的代码如下。非常感谢任何帮助！也许这是谷歌的错误？或者是否有我遗漏的对齐参数看起来像一个bug——当间隔用于多个列（条）序列时，间隔正确对齐，否则一个选项是在图表的'ready'事件触发时手动移动它们但是，图表会将间隔发送回其原始位置，任何时候都可以进行交互，例如

我正在尝试创建一个包含多个条形和线条的组合图。由于这些线是平均值，我还想添加最小和最大误差条。谷歌把这些称为“间隔”

问题是这些线与钢筋的中心对齐（在两者之间，这很好），但这些线的间隔似乎与第一根钢筋对齐。看我的例子。

我的代码如下。非常感谢任何帮助！也许这是谷歌的错误？或者是否有我遗漏的对齐参数

看起来像一个bug——当间隔用于多个列（条）序列时，
间隔正确对齐，否则

一个选项是在图表的

'ready'

事件触发时手动移动它们

但是，图表会将间隔发送回其原始位置，
任何时候都可以进行交互，例如悬停或选择

因此，可以使用

MutationObserver

来了解何时发生了交互，
以设置所需的间隔位置

请参阅以下工作片段，
当

'ready'

事件触发时，间隔将移动到新的x坐标，
然后保存新的x坐标，并在发生交互时重新应用

google.charts.load（'current'{
回调：drawVisualization，
软件包：['corechart']
});
函数drawVisualization（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Week'）；//隐式域标签列。
data.addColumn（'number'，'A average'）；//隐式系列1数据列。
data.addColumn（{type:'string'，role:'annotation'}）；//annotationText col。
data.addColumn（'number'，'A rolling average'）；//隐式系列1数据列。
data.addColumn（{type:'number'，role:'interval'}）；//interval role col。
data.addColumn（{type:'number'，role:'interval'}）；//interval role col。
data.addColumn（'number'，'B average'）；//隐式系列1数据列。
data.addColumn（{type:'string'，role:'annotation'}）；//annotationText col。
data.addColumn（'number'，'b4wk average'）；//隐式系列1数据列。
data.addColumn（{type:'number'，role:'interval'}）；//interval role col。
data.addColumn（{type:'number'，role:'interval'}）；//interval role col。
data.addRows([
[1(01/03/17),0.10,A1,0.20,0.19,0.21,0.20,A2,0.67,0.66,0.68],，
[2(08/03/17),0.23,B1,0.90,0.89,0.91,0.76,B2,0.43,0.42,0.44],，
[3(15/03/17),0.10,C1,0.65,0.63,0.66,0.34,C2,0.89,0.88,0.90],，
[4(22/03/17),0.22,D1,0.20,0.19,0.21,0.23,D2,0.43,0.42,0.44]
]);
变量选项={
标题:"测试",，
变量：{title:'%average'，格式：'#%'}，
hAxis:{title:'周数（周开始）}，
身高：600，
序列类型：“条”，
系列：{
1:{type:'line'}，
3:{type:'line'}
},
工具提示：{trigger:'both'}，
间隔：{style:'box'}，
宽度：900
};
var chartDiv=document.getElementById（'chart_div'）；
var chart=新的google.visualization.ComboChart（chartDiv）；
var observer=新的MutationObserver（函数（）{
getInterval（）.forEach（函数（rect，index）{
rect.setAttribute（'x'，xCoords[index]）；
});
});
var xCoords={}；
google.visualization.events.addListener（图表'ready'，函数（）{
getInterval（）.forEach（函数（rect，index）{
xCoords[index]=parseFloat（rect.getAttribute（'x'））+22；
rect.setAttribute（'x'，xCoords[index]）；
});
观察者，观察者{
儿童名单：是的，
子树：真
});
});
函数getInterval（）{
var区间=[]；
Array.prototype.forEach.call（chartDiv.getElementsByTagName（'rect'），function（rect）{
if（（rect.getAttribute（'fill'）='#a52b0e'））||
（rect.getAttribute（'fill'）='#0c7112'））{
间隔。推（rect）；
}
});
返回间隔；
}
图表绘制（数据、选项）；
}

看起来像一个bug——当间隔用于多个列（条形）序列时，
间隔正确对齐，否则