如何给图表添加标题和副标题?

作者站长头像
站长
· 阅读数 18

类似 (https://visactor.io/vchart/demo/line-chart/basic-line)这样的折线图,如何给图表添加标题和副标题?我希望给图表上方添加标题描述,该如何配置?

回复
1个回答
avatar
test
2024-06-27

不同图表库的解决方案不一样。根据你给的 demo,在 VChart 中,只需要配置 title.text(标题文本)和 title.subtext(副标题文本)即可。

另外,你可以通过 title.textStyle 和title.subtextStyle 配置来分别调整标题的样式。

title: {
    text: 'Line chart',
    subtext:
      'The line chart is a simple, two-dimensional chart with an X and Y axis, each point representing a single value.',
    textStyle: {
      fontSize: 20
    },
    subtextStyle: {
      fontStyle: 'italic'
    }
}

再给一个完整的例子: https://codesandbox.io/s/title-in-line-chart-rkzvns

answer image

官方站点的标题 demo:https://visactor.io/vchart/demo/title/richText-title标题教程:https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts...相关api:https://visactor.io/vchart/option/lineChart#title.text

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容