问题描述
类似下图的效果,希望在图表里指定的 x 轴范围绘制一个颜色色块,在 VChart 该如何配置?
解决方案
你可以通过 markArea 组件实现这个效果,使用 markArea.coordinates 属性声明要标注的数据范围。
coordinates:支持配置数据值,VChart 会自动根据数据映射到画布坐标进行范围绘制。
markArea: [
{
coordinates: [
{
Date: 'Jan-20',
Price: 0.18
},
{
Date: 'Mar-23',
Price: 0.18
},
{
Date: 'Mar-23',
Price: 0.12
},
{
Date: 'Jan-20',
Price: 0.12
}
],
label: {
text: 'Electricite prices have surged since 2020',
position: 'insideTop'
}
}
],