highcharts yAxis日期时间从0开始

tzcvj98z  于 2023-08-05  发布在  Highcharts
关注(0)|答案(2)|浏览(148)

为什么highcharts yAxistypedatetime总是从1 Jan开始?
我只需要显示时间,但第一个值总是1月。如何将其更改为从00:00或00:00:00或只是0开始?如果我从yAxis中删除datetime,那么我只需要数据中的值,这不是我需要的,因为我需要在图表中显示平均时间,正如您在下面的示例中所看到的那样


的数据
这是demo

function seconds2timeRich(d) {
    d = Number(d);
    var h = Math.floor(d / 3600);
    var m = Math.floor(d % 3600 / 60);
    var s = Math.floor(d % 3600 % 60);

    var hDisplay = h > 0 ? h + (h == 1 ? "h, " : "h ") : "";
    var mDisplay = m > 0 ? m + (m == 1 ? "m, " : "m ") : "";
    var sDisplay = s > 0 ? s + (s == 1 ? "s" : "s") : "0s";
     
        return hDisplay + mDisplay + sDisplay;
     
}

var options = {
            chart: {
                height:200,
                animation: true         
            },
            title: {
                text: null,
            },
            global : {
                useUTC : false
            },
            tooltip: {
                outside: true,
                shared: true,
                formatter: function() {
                    var h = '0'+this.x;
                     return '<b>'+h.slice(-2)+' h</b><br>Avg. time on site on  '+seconds2timeRich(this.point.y/1000);
          
                }

            },
            xAxis: [{
                 minorTickLength: 0,
                 tickLength: 0,
                 labels: {
                    style: {
                        color: 'var(--trock-gray-400)',
                        fontSize:'0.6944444444rem',
                        fontWeight: '500',
                    }
                },
                lineWidth: 0,
                visible:true,
                type: 'category',
                crosshair: {
                    width:2,
                    color: "rgba(58, 125, 238, 0.1)" 
                },
            }],
            yAxis: {
               type: 'datetime',
                softMin: 0,
                softMax: 1,
                min:0,
                minTickInterval:1,
                gridLineColor: 'var(--trock-gray-200)',
                labels: {
                    style: {
                        color: 'var(--trock-gray-400)',
                        fontSize:'0.6944444444rem',
                        fontWeight: '500'
                    }
                },
                opposite: true,
                title: null,
            },
            accessibility: {enabled: false},
            legend:false,
            credits:false,
            plotOptions: {
                area: {
                    stacking: 'normal',    
                    marker: {
                        radius: 0,
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },
            series: [
                {
                    type: 'area',
                    data: [["00",0],["01",20000],["02",0],["03",0],["04",0],["05",0],["06",0],["07",0],["08",0],["09",0],["10",0],["11",26548],["12",0],["13",35000],["14",0],["15",0],["16",0],["17",0],["18",0],["19",0],["20",0],["21",10000],["22",0],["23",0]],
 
                } 
            ]
        };
var AvgChart = Highcharts.chart('container',options);

个字符

qvtsj1bj

qvtsj1bj1#

这是因为dateTimeLabelFormats的默认设置。第一个标签被视为day。您可以用途:

yAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      millisecond: '%H:%M:%S',
      second: '%H:%M:%S',
      minute: '%H:%M:%S',
      hour: '%H:%M:%S',
      day: '%H:%M:%S',
      week: '%H:%M:%S',
      month: '%H:%M:%S',
      year: '%H:%M:%S',
    }
  }

字符串

现场演示:https://jsfiddle.net/BlackLabel/1ztf84ns/
API引用:https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats

liwlm1x9

liwlm1x92#

好吧,我发现解决方案可能是可以帮助别人有同样的问题,实际上合并选项是帮助

addFormater = Highcharts.merge(options, {yAxis: {labels:{formatter:function() {return myFunc(this.value)}}}});

字符串
然后初始化图表

var AvgChart = Highcharts.chart('chart-duration',addFormater);

相关问题