在多个Highcharts图上对齐x轴上的日期

Question

我有三张图，如下图所示。正如您所看到的那样，日期在最后两个日期对齐，但在顶行图表上，日期与其他两个日期不对齐。我能以任何方式控制这个吗？

代码如下所示：

<div id="statisticsBGDiagramLastMonth" style="width:950px; height:250px;"></div>
<div id="statisticsInsulinDiagramLastMonth" style="width:950px; height:200px;">/div>
<div id="statisticsCarbsDiagramLastMonth" style="width:950px; height:200px;">/div>

$(function () {

            var usersPerClinicDiagram = new Highcharts.Chart({
                chart: {
                    renderTo: 'statisticsBGDiagramLastMonth',
                    backgroundColor:'#F8F8FA' 
                },

                title: {
                    text: 'Blodsocker'
                },

                xAxis: {
                    type: 'datetime'

                },

                yAxis: {
                    tickInterval: 10,
                    min: 0,
                    title: {
                        text: null
                    }
                },

                tooltip: {enabled: true, shared: false,
                    formatter: function() {
                        var text = Highcharts.dateFormat('%Y-%m-%d ' + '%H:%M',
                                              new Date(this.x)) + ' ' + this.series.name +
                                   '<br>' + this.y + ' mmol/l';                        
                        return text;
                    }
                },

                credits: {
                    enabled: false
                },

                legend: {
                    enabled: false
                },

                series: [{
                    name: 'BG',
                    data: @Model.LastMonthPatientBGValuesGraphData,
                    //zIndex: 1,
                    type: 'line',
                    shadow: false,
                    marker: {
                        enabled: false,
                        fillColor: 'white',
                        lineWidth: 1,
                        lineColor: Highcharts.getOptions().colors[0]
                    }
                }]

            });

        });


        $(function () {
            var usersPerClinicDiagram = new Highcharts.Chart({
                chart: {
                    renderTo: 'statisticsInsulinDiagramLastMonth',
                    backgroundColor:'#F8F8FA'
                },
                legend: {
                    enabled: false                   
                },

                title: {text: 'Insulin'},

                tooltip: {enabled: true, shared: false,
                    formatter: function() {
                        var text = Highcharts.dateFormat('%Y-%m-%d ',
                                              new Date(this.x)) + ': ' + this.series.name +
                                   '<br>' + this.y + 'E';                        
                        return text;
                    }
                },
                xAxis: {                   
                    type: "datetime"                  
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: ''
                    },
                    tickInterval: 20,
                    stackLabels: {                        
                        enabled: true,
                        formatter: function(){
                            var val = this.total;
                            if (val > 0) {
                                return val;
                            }
                            return '';
                        },
                        style: {
                            fontSize: '9px',
                            fontWeight: 'bold',                            
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        },                       
                    }               

                },                   

                plotOptions: {                    
                    //line: {dataLabels: {enabled: true, style: {fontSize: '8px'}, style: {textShadow: false}, allowDecimals: true,  formatter: function() {return this.y + 'e'}}},
                    column: {stacking: 'normal', shadow: false, dataLabels: {
                        formatter:function() {
                            if(this.y != 0) {
                                return this.y;
                            }
                        },
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            textShadow: '0 0 3px black',
                            fontSize: '8px'
                        }
                    }},
                    //series: {minPointLength: 0}
                },

                credits: { enabled: false },                
                series: [{pointWidth: 25, type: 'column', color: '#009ddf',  name: 'Insulin Basal', allowDecimals:true, data: @Html.Raw(@Model.LastMonthPatientSortedBasalGraphData) }, {pointWidth: 25, type: 'column', color: '#A7CBED',  name: 'Insulin Bolus', allowDecimals:true, data: @Html.Raw(@Model.LastMonthPatientSortedBolusGraphData)}]
            });
        });

        $(function () {
            var usersPerClinicDiagram = new Highcharts.Chart({
                chart: {
                    renderTo: 'statisticsCarbsDiagramLastMonth',
                    backgroundColor:'#F8F8FA'
                },
                legend: {
                    enabled: false                    
                },
                title: {text: 'Kolhydrater'},

                tooltip: {enabled: true, shared: false,
                    formatter: function() {                       
                        var text = Highcharts.dateFormat('%Y-%m-%d ',
                                              this.x) + ': ' + this.series.name +
                                   '<br>' + this.y + ' gram';                        
                        return text;
                    }
                },
                xAxis: {
                    title: {text: 'Datum',align: 'high'},
                    type: "datetime",
                    allowDecimals: true,
                },
                yAxis: {                    
                    tickInterval: 100,
                    min: 0,
                    title: {
                        text: ''
                    },
                    stackLabels: {
                        enabled: true,
                        formatter: function(){
                            var val = this.total;
                            if (val > 0) {
                                return val;
                            }
                            return '';
                        },
                        style: {
                            fontSize: '9px',
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },  

                plotOptions: {                   
                    column: {stacking: 'normal', shadow: false},
                    //series: {minPointLength: 0}
                },

                credits: { enabled: false },                
                series: [{ pointWidth: 15, type: 'column', color: '#666666',  name: 'Carbs', allowDecimals:true, data: @Html.Raw(@Model.LastMonthFoodDataGraphData) }]
            });
        }); 

Answer 1

刚出现这个问题并通过设置

解决了这个问题

plotOptions: {
  column: {
    pointPlacement: 'on'
  }
}