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

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

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

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

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

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

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

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

yyyllmsg

yyyllmsg1#

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

  1. xAxis: [{
  2. tickInterval: 1000 * 60 * 60 * 24, // Days
  3. labels: {
  4. format: '{value:%e. %b.}',
  5. style: {
  6. fontSize: '8px'
  7. }
  8. },
  9. units: [
  10. [
  11. 'day',
  12. [2]
  13. ]
  14. ]
  15. }, {
  16. tickInterval: 1000 * 60 * 60 * 24 * 30, // Month
  17. /* labels: {
  18. format: '{value:%b}',
  19. }, */
  20. min: Date.UTC(2014, 3, 17),
  21. max: Date.UTC(2015, 11, 0),
  22. currentDateIndicator: true,
  23. units: [
  24. [
  25. 'month',
  26. [3]
  27. ]
  28. ],
  29. dateTimeLabelFormats: {
  30. month: {
  31. list: ['Quater']
  32. }
  33. }
  34. }, {
  35. tickInterval: 1000 * 60 * 60 * 24 * 365, // Year
  36. labels: {
  37. format: '{value:%Y}',
  38. style: {
  39. fontSize: '15px'
  40. }
  41. },
  42. linkedTo: 1
  43. }],

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

展开查看全部

相关问题