highcharts 如何在甘特中显示季度

bwleehnv  于 2022-11-10  发布在  Highcharts
关注(0)|答案(2)|浏览(224)

我尝试使用您的甘特库创建一些里程碑如下:

我希望有季度1 /20 XX,季度2 /20 XX等...而不是这些123456...数字在上面,我一直在检查和尝试几乎任何东西,我想我需要你的帮助,我试过在xAxis上使用tickInterval和tickAmount,但它似乎做了它想做的任何事情,我现在有点沮丧...请给我提供任何帮助,谢谢。

2w2cym1i

2w2cym1i1#

这就是我是如何做到的,我希望这能帮助任何像我一样的人,没有例子就会发疯:-((由于空间原因而简化)

xAxis: [{
               ...

                title: { text: 'Quarters' },

                units: [
                    ['month', [3]],
                ],
                useHTML: true,
                labels: {

                    align: "center",
                    format: '{value: %b-%y}',   
                    formatter: function AxisLabelsFormatterCallbackFunction() {

                        var providedLocalDate = new Date(this.value);

                        var realDate = new Date(providedLocalDate.getTime() + (providedLocalDate.getTimezoneOffset() * 60 * 1000));

                        var month = realDate.getMonth();

                        var QuarterNumber;

                        if (month >= 0 && month <= 2)QuarterNumber = 1;
                        if (month >= 3 && month <= 5) QuarterNumber = 2;
                        if (month >= 6 && month <= 8) QuarterNumber = 3;
                        if (month >= 9 && month <= 11) QuarterNumber = 4;

                        var year = realDate.getFullYear().toString();
                        var year2digits = year.substring(year.length - 2, year.length);
                        return 'Q' + QuarterNumber + '-<span class="font-weight-bold">' + year2digits + '</span>';

                    },
                },

zzoitvuj

zzoitvuj2#

使用xAxis.labels.format(也可使用xAxis.labels.formatter)或xAxis.dateTimeLabelFormats根据提供的数据设置标签的格式:

范例:

xAxis: [{
    labels: {
      format: 'Month: {value: %m}'
    }
  }],

API引用:https://api.highcharts.com/gantt/xAxis.dateTimeLabelFormatshttps://api.highcharts.com/gantt/xAxis.labels.format
演示:https://jsfiddle.net/BlackLabel/5hopuL8f/

相关问题