如何去除HighChart两端的填充 [英] How to remove the padding on the both ends of the HighChart

问题描述

这是我使用的配置

 图表：{
类型：'xrange'，
身高：800，
}，
 title：{
文本：'患者会话概述'
}，
 xAxis：{
标题：'每日时间'，
类型：'datetime'，
 tickInterval： 3600 * 1000，
 tickPixelInterval：200，
标签：{
格式化程序：function（）{
返回Highcharts.dateFormat（'％H：％M'，this.value） ; 
}，
}，
 min：Date.UTC（2016,1,1），
 max：Date.UTC（2016,1,2），
 }，
 yAxis：{
标题：'每月的日子'，
类型：'datetime'，
 tickInterval：3600 * 1000 * 24，
 // tickPixelInterval：100，
 min：Date.UTC（2016,1），
 max：Date.UTC（2016,2） -  3600 * 1000 * 24 
 // min：0，
 //最大值：31 
}，
 plotOptions：{
系列：{
 pointPadding：0，
 groupPadding：0 
} 
 $，b $ b系列：[{
 name：'Sessions'，
 // pointStart：Date.UTC（2000,0,1），
 // pointInterval：3600 * 1000，
 // pointPadding：10，
 // groupPadding：0，
 borderRadius：5，
 pointWidth：20，
 data：[{
 x：Date.UTC（2016，1，1，0），
 x2：Date.UTC（2016，1，1，9），
y：Date.UTC（2016,1,4）
}，{
x：Date.UTC（2016，1，1，12），
 x2：Date.UTC（2016，1，1，15），
y：Date。 UTC（2016,1,5）
}，{
x：Date.UTC（2016，1，1，8），
 x2：Date.UTC（2016，1，1，9 ），
y：Date.UTC（2016,1,14）
}，{
x：Date.UTC（2016，1，1，8），
 x2：日期。 UTC（2016,1,1,9），
y：Date.UTC（2016,1,20）
}，{
x：Date.UTC（2016，1，1，8） ，
 x2：Date.UTC（2016,1,1,23），
y：Date.UTC（2016,1,25）
}，]，
}] 
  

以下是

I have been trying this for hours and still have no idea.

Here is the config that I am using

 chart: {
            type: 'xrange',
            height: 800,
        },
        title: {
            text: 'Patient Sessions Overview'
        },
        xAxis: {
            title: 'Time of the Day',
            type: 'datetime',
            tickInterval: 3600*1000,
            tickPixelInterval: 200,
            labels: {
                formatter: function () {
                    return Highcharts.dateFormat('%H:%M', this.value);
                },
            },
            min: Date.UTC(2016,1,1),
            max: Date.UTC(2016,1,2),
        },
        yAxis: {
            title: 'Day of the Month',
            type: 'datetime',
            tickInterval: 3600*1000*24,
            //tickPixelInterval: 100,
            min: Date.UTC(2016,1),
            max: Date.UTC(2016,2) - 3600*1000*24
            //min: 0,
            //max: 31
        },
        plotOptions:{
            series: {
                pointPadding: 0,
                groupPadding: 0
            }
        },
        series: [{
            name: 'Sessions',
            //pointStart: Date.UTC(2000,0,1),
            //pointInterval: 3600*1000,
            //pointPadding: 10,
            // groupPadding: 0,
            borderRadius: 5,
            pointWidth: 20,
            data: [{
                    x: Date.UTC(2016, 1, 1, 0),
                    x2: Date.UTC(2016, 1, 1, 9),
                    y: Date.UTC(2016,1,4)
                }, {
                    x: Date.UTC(2016, 1, 1, 12),
                    x2: Date.UTC(2016, 1, 1, 15),
                    y: Date.UTC(2016,1,5)
                }, {
                    x: Date.UTC(2016, 1, 1, 8),
                    x2: Date.UTC(2016, 1, 1, 9),
                    y: Date.UTC(2016,1,14)
                }, {
                    x: Date.UTC(2016, 1, 1, 8),
                    x2: Date.UTC(2016, 1, 1, 9),
                    y: Date.UTC(2016,1,20)
                }, {
                    x: Date.UTC(2016, 1, 1, 8),
                    x2: Date.UTC(2016, 1, 1, 23),
                    y:Date.UTC(2016,1,25) 
            },],
        }]

Here is the jsfiddle link

I need to remove the chart to make full use of the plot area without leaving a huge white space on both ends.

解决方案

It is problem with unsorted data. In fact, you can not sort your data as Highcharts would expect, because some of the points are starting before previous one are ended. However, for such case, series.pointRange = 1 resolves all issues, take a look: http://jsfiddle.net/umndydLL/1/

这篇关于如何去除HighChart两端的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！