如何设置折线的分段样式，比如 末尾虚线？

问题描述

我有一个折线图的需求，折线的最后一个数据点是预测数据，所以想要折线最后一段能显示成虚线，类似下面这张图。这个要怎么实现更方便？

解决方案

推荐你使用 VChart，官网 demo 正有你需要的效果：https://visactor.io/vchart/demo/line-chart/dash-line 可以在 line 的图元样式回调里，根据数据返回不同的样式。

• lineDash：虚线模式。它使用一组值来指定描述模式的线和间隙的交替长度。

line: {
  style: {
    stroke: (data) => data.latest ? 'blue': 'green',
    lineDash: data => data.latest ? [5, 5]: [0]
  }
},
point: {
  style: {
    fill: (data) => data.latest ? 'blue': 'green',
  }
}

代码示例

相关文档

• 更多示例
• 相关 API
• github