highcharts 甘特/ X轴显示年/季度/月

yuvru6vn  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(351)

我们尝试创建3个X标题行,一个包含年份,另一个包含季度,最后一个包含月份...类似于以下内容:

如上图所示,我们有2行代码,一行是年份,另一行是季度(3个月),我们希望在每个季度下面再添加一行月份,我们的代码如下所示:

注:由于3个月(季度)不是自动具有标签的事物,因此我们使用格式化程序创建了一个标签。
现在,当我们尝试添加第三行时,如下所示:

我们得到的是一些意想不到的东西...年是正确的,而季度现在像年一样扩展,月份的列表是正确的,如下:

下图应能给予您更好地了解我们希望实现的目标:

指令集
谢谢你的任何帮助,你可能带来。我的代码链接如下。

yyyllmsg

yyyllmsg1#

请注意,标题中的这一行称为x轴,是一个配置对象数组。您可以使用xAxis.tickInterval为每个对象设置以轴为单位的刻度间隔。
dateTimeLabelFormats中,您可以将单位名称变更为所需的名称。

xAxis: [{
    tickInterval: 1000 * 60 * 60 * 24, // Days
    labels: {
      format: '{value:%e. %b.}',
      style: {
        fontSize: '8px'
      }
    },
    units: [
      [
        'day',
        [2]
      ]
    ]
  }, {
    tickInterval: 1000 * 60 * 60 * 24 * 30, // Month
/*     labels: {
      format: '{value:%b}',
    }, */
    min: Date.UTC(2014, 3, 17),
    max: Date.UTC(2015, 11, 0),
    currentDateIndicator: true,
    units: [
      [
        'month',
        [3]
      ]
    ],
    dateTimeLabelFormats: {
      month: {
        list: ['Quater']
      }
    }
  }, {
    tickInterval: 1000 * 60 * 60 * 24 * 365, // Year
    labels: {
      format: '{value:%Y}',
      style: {
        fontSize: '15px'
      }
    },
    linkedTo: 1
  }],

现场演示:https://jsfiddle.net/BlackLabel/w3nb4oqj/

相关问题