时间戳

首页 > 解决方案 > 更改 Highcharts Gantt X 轴标签的字体大小和方向

highcharts - 更改 Highcharts Gantt X 轴标签的字体大小和方向

问题描述

我正在尝试创建调度甘特图。我的甘特图基于资源管理示例。到目前为止有很多好东西！我遇到了一些问题，我将为此单独发帖。

我遇到的最后一个问题（到目前为止）是我需要将一天中的时间显示为我的 x 轴的一部分。当我在图表中获得超过 2 天的数据时，该 x 轴标签的部分或全部开始消失，而是留下空白值。我想将文本方向垂直并可能使字体更小。

在下面的小提琴中，有 4 天的数据。无论我制作的字体有多小，小时值都是空白的。如果我浏览数据并删除所有包含 02-06 和 02-07 的条目，这会使甘特图只显示 2 天的数据，并且小时标签显得非常小。

标签轮换似乎没有效果。最终，我需要在该轴上显示一天中的时间……这是我的首选方式，每小时显示一次。但欢迎其他解决方案。也许每隔一小时甚至每 4 小时才显示一次。

这是显示缺少标签的小提琴：https ://jsfiddle.net/eddiem9/n2v740tj/7/ 这是一个显示较少数据的小提琴，因此标签出现https://jsfiddle.net/eddiem9/h9qw5rsj/22/

                chart = Highcharts.ganttChart('container', {
                series: series,

                plotOptions: {
                    series: {
                        color: '#FF0000'
                    }
                },
                scrollbar: {
                    enabled: true
                  },
                title: {
                    text: 'Irrigation Schedule',
                    style: {
                        color: '#000000',
                        fontWeight: 'bold',
                        fontSize: '24px'
                    }
                },

                //rangeSelector: {
                //  enabled: true,
                //  selected: 0
                //},
                tooltip: {
                    pointFormat: '<span>Schedule: {point.schedule}</span><br/><span>From: {point.start:%m/%d %H:%M}</span><br/><span>To: {point.end:%m/%d %H:%M}</span>'
                },
                xAxis:
                [{
                        labels: {
                            format: '{value:%H}', // hour of the day 
            rotation: -90,
                align: 'center',
                reserveSpace: true,
            style: {
                fontSize: '8pt',
            }
                        },
                        tickInterval: 1000 * 60 * 60, // HOUR
                    }, {
                        labels: {
                            format: '{value:%B %e}' // day name of the week
                        },          
                        tickInterval: 1000 * 60 * 60 * 24, // Day
                    }

                ],
                yAxis: {
                    type: 'category',
        max: series.length-1,
                    grid: {
                        columns: [{
                                title: {
                                    text: 'Pump'
                                },
                                categories: map(series, function (s) {
                                    return s.PumpName;
                                })
                            }, {
                                title: {
                                    text: 'Zone'
                                },
                                categories: map(series, function (s) {
                                    return s.IrrigationZoneName;
                                })
                            },{
                                title: {
                                    text: 'Status'
                                },
                                categories: map(series, function (s) {
                                    return s.CurrentStatus;
                                })
                            }
                        ]
                    }
                }

            }
            )

提前致谢！

埃迪

标签： highchartshighcharts-gantt

解决方案

我自己也有同样的问题

您需要通过样式给 xAxis 一个属性标签。

您可以使用相同的方向，下面给出了想法（这里我们改变了文字大小）

xAxis: [{
//Like this
     labels: {
       style: {
         fontSize: '9'
         }
//.....CODE CONTINUES
      }],

推荐阅读