欢迎光临
我们一直在努力

Highcharts径向条形图(Radial Bar Chart)完全指南:环形数据可视化的艺术与实践

Radial (or Circular) bar chart 径向(或圆形)条形图

径向条形图(Radial Bar Chart),也称为圆形条形图(Circular Bar Chart),是一种将传统条形图从直角坐标系映射到极坐标系的特殊图表类型。与常规条形图不同,径向条形图中的条形不是沿直线延伸,而是从中心点向外呈放射状或沿着圆周方向弯曲延伸,条形长度代表数据值的大小。

这种图表结合了条形图的直观比较功能和圆形的视觉吸引力,使数据展示更具设计感和冲击力。

径向(或环形)柱状系列在极坐标系中展示柱子。由于xAxis是垂直的,yAxis是环形的,与非倒置版本相反,柱子的形状是环形的。

在这里插入图片描述

开始使用Highcharts径向条形图

加载所需脚本

为了创建一个径向条形图,需要加载 highcharts.js 和 highcharts-more.js 脚本,就像非倒置极坐标图的情况一样。

创建径向条形图

要创建一个径向条形系列,必须将chart.polar和chart.inverted选项都设置为true。

Highcharts.chart('container', {
chart: {
polar: true,
inverted: true
}
});

数据格式

数据的格式与任何其他column或bar系列相同。示例:

series: [{
type: 'column',
data: [1, 2, 3, 4, 5]
}]

使用示例

两个系列堆叠并启用数据标签

就像非倒置图表中的普通柱状系列一样,径向条形系列也可以堆叠。

在这里插入图片描述

为同一组数据设置自定义阈值

设置不同的threshold将为系列设置一个新的起点。

在这里插入图片描述

设定不同的起始角度和结束角度

一个自定义的 startAngle 和 endAngle.

在这里插入图片描述

不断更新的系列(带颜色轴)

在这里插入图片描述

赞(0)
未经允许不得转载:171主机测评 » Highcharts径向条形图(Radial Bar Chart)完全指南:环形数据可视化的艺术与实践
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址