Javascript 当条形图显示在日期轴上时，如何将形状与条形图的开始/结束对齐？

我有一个显示在日期范围轴上的条形图

我想用矩形来包装周末

但是，形状的开头显示在条的中间，而不是条的开头

const跟踪=[
{
“hoverinfo”：“文本”，
“名称”：“使用情况”，
“方向”：“v”，
“类型”：“条”，
“x”：[
"2018-06-01",
"2018-06-02",
"2018-06-03",
"2018-06-04",
"2018-06-05",
"2018-06-06",
"2018-06-07",
"2018-06-08",
"2018-06-09",
"2018-06-10",
"2018-06-11",
"2018-06-12",
"2018-06-13",
"2018-06-14",
"2018-06-15"
],
“y”：[
0,
0,
0,
0,
0,
2494249.18,
1560878.67,
2095468.45,
1483625.08,
786367.28,
426026.17,
380614.07,
381928.52,
95275.78,
11173.3
]
}
];
常量布局={
“高度”：320，
“保证金”：{
“b”：100，
“l”：100，
“pad”：10，
“r”：50，
“t”：0
},
“形状”：[
{
“fillcolor”：“#d3d3”，
“行”：{
“宽度”：0
},
“不透明度”：0.5，
“类型”：“rect”，
“x0”：“2018-06-02”，
“x1”：“2018-06-04”，
“外部参照”：“x”，
“y0”：0，
“y1”：1，
“yref”：“纸张”
},
{
“fillcolor”：“#d3d3”，
“行”：{
“宽度”：0
},
“不透明度”：0.5，
“类型”：“rect”，
“x0”：“2018-06-09”，
“x1”：“2018-06-11”，
“外部参照”：“x”，
“y0”：0，
“y1”：1，
“yref”：“纸张”
}
],
“showlegend”：假，
“宽度”：640，
“xaxis”：{
“日期”：“日期”，
“固定范围”：正确，
“标题”：“日期”
},
“yaxis”：{
“固定范围”：正确，
“标题”：“估计门票收入”
}
};
Plotly.plot（'myDiv'，迹线，布局）
更新：

如果您有多个子批次，请调整
形状
属性。通过使用属性
y0，y1，line.color，line.width
，您可以使形状容纳任意多个迹线，在下面的示例中，您可以看到，我们调整了线条的厚度（形状的边框），使其覆盖迹线，并将线条颜色设置为与形状的填充颜色相同的颜色

注意：我推荐此解决方案，因为我无法将
xaxis
记号的位置设置为跟踪的
左侧
（不确定是否有该属性），这将是理想的解决方案


const跟踪=[
{
“hoverinfo”：“文本”，
“名称”：“使用情况”，
“方向”：“v”，
“类型”：“条”，
“x”：[
"2018-06-01",
"2018-06-02",
"2018-06-03",
"2018-06-04",
"2018-06-05",
"2018-06-06",
"2018-06-07",
"2018-06-08",
"2018-06-09",
"2018-06-10",
"2018-06-11",
"2018-06-12",
"2018-06-13",
"2018-06-14",
"2018-06-15"
],
“y”：[
0,
0,
0,
0,
0,
2494249.18,
1560878.67,
2095468.45,
1483625.08,
786367.28,
426026.17,
380614.07,
381928.52,
95275.78,
11173.3
]
},{
“hoverinfo”：“文本”，
“名称”：“提款2”，
“方向”：“v”，
“类型”：“条”，
“x”：[
"2018-06-01",
"2018-06-02",
"2018-06-03",
"2018-06-04",
"2018-06-05",
"2018-06-06",
"2018-06-07",
"2018-06-08",
"2018-06-09",
"2018-06-10",
"2018-06-11",
"2018-06-12",
"2018-06-13",
"2018-06-14",
"2018-06-15"
],
“y”：[
0,
0,
0,
0,
0,
2494249.18,
1560878.67,
2095468.45,
1483625.08,
786367.28,
426026.17,
380614.07,
381928.52,
95275.78,
11173.3
]
}
];
常量布局={
“高度”：320，
“保证金”：{
“b”：100，
“l”：100，
“pad”：10，
“r”：50，
“t”：0
},
barmode：“组”，
“形状”：[
{
“fillcolor”：“#d3d3”，
“行”：{
“宽度”：0
},
“不透明度”：0.5，
“类型”：“rect”，
“x0”：“2018-06-02”，
“x1”：“2018-06-04”，
“外部参照”：“x”，
“y0”：0.06，
“y1”：1，
“行”：{
“颜色”：“D3”，
“宽度”：27
},
“yref”：“纸张”
},
{
“fillcolor”：“#d3d3”，
“行”：{
“宽度”：0
},
“不透明度”：0.5，
“类型”：“rect”，
“x0”：“2018-06-09”，
“x1”：“2018-06-11”，
“外部参照”：“x”，
“y0”：0.06，
“y1”：1，
“行”：{
“颜色”：“D3”，
“宽度”：27
},
“yref”：“纸张”
}
],
“showlegend”：假，
“宽度”：640，
“xaxis”：{
“左”：“左”，
“日期”：“日期”，
“固定范围”：正确，
“标题”：“日期”
},
“yaxis”：{
“固定范围”：正确，
“标题”：“估计门票收入”
}
};
Plotly.plot（'myDiv'，迹线，布局）

这种方法的问题是，如果您有多条条形记录道，将“偏移量”设置为0将使它们彼此重叠，而不是彼此相邻。@Gajus更新了我的答案！