如何在图表中显示一个色块区域,区域是覆盖在指定的 x 轴范围之内?

144 阅读1分钟

问题描述

类似下图的效果,希望在图表里指定的 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'
      }
    }
  ],

代码示例

visactor.io/vchart/demo…

结果展示

相关文档