如何顯示條彼此相鄰

Question

問題

當我只有1系列展現在highcharts條形圖顯示它在彼此而不是彼此相鄰的頂部多個用戶。以下是我正在使用的代碼。請指導我正確的方向。

此外，如果我在任何用戶的系列中添加1個更多的日期，它會正確顯示，但這不是解決方案，因爲我將始終在我的圖上有1個日期。

JS提琴鏈接：http://jsfiddle.net/bhats1989/b33mN/3/

代碼

$(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>'; 
        }     
       } 
      } 

Answer 1

您必須爲系列設置您的pointRange選項。

pointRange：關於線性和日期時間軸線的範圍內，將被計算爲兩個最接近的數據點之間的距離。

由於只有一個點，Highchart將無法計算pointRange ...

要確保它會工作，把它放在tickInterval值。

// ... 
plotOptions: { 
    series: { 
     pointRange: 24 * 3600 * 1000, // tickInterval has the same value 
     // ... 
    }, 
    // ... 
}, 
// ... 

你對第一次和最後一個標籤問題：

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

看這個Example。

Answer 2

的問題是，有一個點Highcharts將無法計算pointRange任何系列。在這種情況下，請直接爲系列設置pointRange，請參閱：http://jsfiddle.net/b33mN/5/

在示例中，pointRange = tickInterval，它可能是您想要實現的。

Answer 3

我知道這是一個晚，但有用的答案，我用pointPlacement的配置屬性使用柱形圖和這裏的時候是plunker展示瞭如何使用它來使列留下彼此相鄰。結果：http://plnkr.co/edit/uqZ4LEugMefLD6WSzHZT?p=preview

$(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 
     } 
     ] 
    }); 
});