Highcharts 如何显示相邻的条形图

问题

在highcharts条形图中，当我只有1个系列要与多个用户一起显示时，它会显示在彼此的顶部，而不是彼此相邻。下面是我使用的代码。请给我指引正确的方向

此外，如果我在任何用户的系列中再添加一个日期，它会正确显示，但这不是解决方案，因为我的图表上总是有一个日期

JS fiddle链接：

代码

$(function () {
                           $('#team_container').highcharts({
                chart: {
                    type: 'bar',
                    //inverted: true,
                    renderTo: 'container',
                    zoomType: 'xy',
                    events: {
                    },
                    zIndex: 5
                },
                title: {
                    text: 'Team Activity Game',
                    x: -20 //center
                },
                subtitle: {
                     text: 'Click and drag in the plot area to zoom in and scroll',
                     x: -25 //center
                 },
                xAxis: {
                  title: {
                       text: 'Week Ending'
                      },
                    type: 'datetime',
                    maxZoom: 24 * 3600000, // Two days
                    labels: {
                         rotation: -45,
                         align: 'right',
                         formatter: function() {
                           return Highcharts.dateFormat('%d/%m/%Y', this.value);
                         }
                     },
                    tickInterval: 24 * 3600 * 1000,
                },
                plotOptions: {
                    series: {
                        events: {
                          legendItemClick: function(event) {
                            if (!this.visible)
                                return true;

                            var seriesIndex = this.index;
                            var series = this.chart.series;
                            var j = series.length;
                            for (var i = 0; i < series.length; i++)
                            {
                                if (series[i].index != seriesIndex)
                                {
                                  series[i].visible ? series[i].hide() : series[i].show();
                                  series[j-1].hide();
                                } 
                            }

                            return false;
                          }
                        }
                    }
                  },
                yAxis: {
                plotBands: [{ // mark the weekend
                    color: '#f4e3e7',
                    from: 0,
                    to: 15,
                    events: {
                        mouseover: function(e) {                            
                           team_tooltipUpdate();
                        }
                    },
                    zIndex: 3
                  }],
                   gridLineColor: null,
                  title: {
                      text: 'Distance (kms)'
                     },
                     plotLines: [{
                     color: '#FF0000',
                     width: 2,
                     value: 15                  }]
                },
                tooltip: {
                    useHTML: true,
                    formatter: team_myFormatter
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [
                                                 {
                         name: 'Mark',
                         data: []
                         },                                              {
                         name: 'Joe',
                         data: [[Date.parse('7/28/2013 UTC'), 7.2954706108315 ]]
                         },                                              {
                         name: 'Max',
                         data: [[Date.parse('7/28/2013 UTC'), 25.668099736872 ]]
                         },                                              {
                         name: 'John',
                         data: [[Date.parse('7/28/2013 UTC'), 16.576099736872 ]]
                         }                                               ,{
                        name: 'yellowline',
                        visible: false,
                        showInLegend: false,
                        data: []
                         }

                    ]
               });

                          });
            function team_tooltipUpdate(){          
              var chart = $('#team_container').highcharts();
              chart.tooltip.refresh(chart.series[4].points[0]);     
            }
            function team_myFormatter(){
                var game_parameter = 'running';

                if(this.series.name == 'yellowline'){
                   return '<span style="color:Red;"><b>Danger Area</b></div>';
                }else{
                    if(game_parameter == 'running'){
                        return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' kms</span>';
                    }else if(game_parameter == 'steps'){
                        return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%d\/%m\/%Y', this.x) +', No. of Steps: '+ parseFloat(this.y).toFixed(2) +'</span>';
                    }else if(game_parameter == 'floors'){
                        return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%d\/%m\/%Y', this.x) +', No. of Floors: '+ parseFloat(this.y).toFixed(2) +'</span>';
                    }else if(game_parameter == 'cycling'){
                        return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' kms</span>';
                    }else if(game_parameter == 'heartrate'){
                        return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' BPM</span>';
                    }                
                }
            }

$（函数（）{
$（'team#u container'）。高图({
图表：{
类型：'bar'，
//倒：是的，
renderTo:'容器'，
zoomType:'xy'，
活动：{
},
zIndex:5
},
标题：{
文字：“团队活动游戏”，
x:-20/中心
},
副标题:{
文本：“在绘图区域中单击并拖动以放大和滚动”，
x:-25/中心
},
xAxis：{
标题：{
文字：“周末”
},
键入：“日期时间”，
maxZoom:24*3600000，//两天
标签：{
轮调：-45，
对齐：“右”，
格式化程序：函数（）{
返回Highcharts.dateFormat（“%d/%m/%Y”，此.value）；
}
},
时间间隔：24*3600*1000，
},
打印选项：{
系列：{
活动：{
legendItemClick:函数（事件）{
如果（！this.visible）
返回true；
var seriesIndex=该指数；
var series=this.chart.series；
var j=系列长度；
对于（变量i=0；i+
dateFormat（“%d\/%m\/%Y”，this.x）+:“+parseFloat（this.Y）.toFixed（2）+'kms”；
}else if（game_参数=='steps'）{
返回“+this.series.name+”
+
Highcharts.dateFormat（'%d\/%m\/%Y'，this.x）+'，步骤数：'+parseFloat（this.Y）.toFixed（2）+'；
}else if（游戏参数==‘楼层’）{
返回“+this.series.name+”
+
Highcharts.dateFormat（'%d\/%m\/%Y'，this.x）+'，楼层数：'+parseFloat（this.Y）.toFixed（2）+'；
// ...
plotOptions: {
    series: {
        pointRange: 24 * 3600 * 1000, // tickInterval has the same value
        // ...
    },
    // ...
},
// ...

xAxis: {
    // ...                    
    showFirstLabel: false,
    showLastLabel: false,
    // ...
}

$(function () {
    $('#container2').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            type: 'category',
            categories:["Population","Kokulation"]
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                pointPadding: 0,
                groupPadding: 0,
                pointWidth:20
            },
        },
        tooltip: {
            shared: false
        },
        series: [{
            name: 'Population',
            data: [
                ['Shanghai', 23.7],
                ['Lagos', 16.1]
            ],
            pointPlacement:0.23
        },
        {name:"Kokulation",
        data:[ 
                        ['Istanbul', 14.2],
                ['Karachi', 14.0]
             ],
             pointPlacement:-0.2146
        }
        ]
    });
});