0
点赞
收藏
分享

微信扫一扫

HighCharts扇形图+流图的批注

君心浅语 2023-11-29 阅读 54

需求:需要生成一个扇形图和一个流图

分析:饼图包含扇形图,就是将饼图修改起始角度来改变图形使用startAngle (圆环的开始角度)endAngle (圆环的结束角度),而流图则需引入streamgraph.js(图表类型)以及annotations.js(批注)文件进行生成修改

解决:

源代码:

HighCharts扇形图+流图的批注_饼图

修改饼图圆环角度成为扇形图

HighCharts扇形图+流图的批注_饼图_02

添加图片注释,不超过 140 字(可选)

HighCharts扇形图+流图的批注_饼图_03

添加图片注释,不超过 140 字(可选)

HighCharts扇形图+流图的批注_饼图_04

添加图片注释,不超过 140 字(可选)

示例:

HighCharts扇形图+流图的批注_饼图_05

此角度为第一张源代码角度

HighCharts扇形图+流图的批注_饼图_06

此角度为第二张源代码角度

HighCharts扇形图+流图的批注_饼图_07

流图,标注

HighCharts 扇形图+流图的批注以上面两表为例进行总结:

  1. 扇形图

1)首先定义一个饼图(pie)

2)在再(plotOptions-pie)里面使用startAngle (圆环的开始角度)endAngle (圆环的结束角度)

2、流图

1)首先引入streamgraph.js(图表类型)以及annotations.js(批注)文件

2)接着在图表类型(type)中定义streamgraph(类型)

3)引入标注属性(annotations);

4)确定对象(labelOptions)对标注的值进行样式编写;

5)添加标签(labels)进行标注说明。

标注功能可以更好的看出数据点想要表达的东西,提高图表可读性更容易理解它。

举报

相关推荐

0 条评论