41.了解Highcharts 固定布局柱形图

微服务商城技术分享

于 2022-08-12 10:40:29 发布

阅读量336

点赞数

文章标签： javascript servlet html

本文链接：https://blog.csdn.net/m0_59198293/article/details/126299436

版权

Highcharts 固定布局柱形图

以下实例演示了固定布局柱形图。

我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 series 下添加 pointPlacement 和 pointPadding 配置。

控制每列之间的距离值，当highcharts图表宽度固定的情况下，此值越大，柱子宽度越小，反之相反。默认此值为0.1

在柱形图中，当 pointPlacement 设置为 "on" 时, X轴上的点没有间隔。如果 pointPlacement 设置为 "between", 列之间按刻度进行布局。

在 Highcharts 3.0.2 后的版本, pointPlacement 可以支持数字，0 为轴上的值， -0.5 为当前值与前面一个值的间隔， 0.5 为当前值与下一个值的间隔。不同与文字设置选项，数字设置不影响轴之间的间隔。

series: {
   name: 'Employees',
   color: 'rgba(165,170,217,1)',
   data: [150, 73, 20],
   pointPadding: 0.3,
   pointPlacement: -0.2
}

文件名：highcharts_column_fixed.htm

<html>
<head>
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4

关注