如何使用自定义图形创建图表？

Question

我需要创建一个如上图所示的图表，但我不知道如何做。数据需要是动态的，如果在加载图表时包含一些动画那就太好了。

我的技术堆栈包括：

• Vue.js
• Chart.js（但如果其他图表库工作得更好的话，也可以开放）
• 顺风CSS

有人能指出我如何实现这一目标的正确方向吗？非常感谢:)

我研究过将 Chart.js 与 Vue.js 结合使用，但我无法找到解决自定义图形（黄线）的资源。

Answer 1

要实现与您的图表类似的图表，您可以查看以下一些关键资源和步骤，也许会有所帮助：

• 要创建带有阴影区域的曲线，请查看有关折线图的 Chart.js 文档：https://www.chartjs.org/docs/latest/charts/line.html
• 对于曲线下方的阴影区域，可以使用渐变。以下是有关如何在 Chart.js 中设置渐变填充的有用视频教程： https://www.youtube.com/watch?v=e-15uzfcd-I

此外，如果您愿意探索其他库，我建议您检查例如：Apache ECharts，我也在我的项目中使用它。虽然我没有像你这样的图表，但 ECharts 有很多很好的例子可能会给你带来启发： https://echarts.apache.org/examples/en/index.html#chart-type-line