2014-09-04 55 views
0

我正在使用highstock可以将chart_type更改为样条或线条。我面临的问题是x轴类别与数据不一致,这通常不是。Highstock xAxis类别未对齐

这是的jsfiddle:http://jsfiddle.net/nishants/sg7ykLpe/1/

$(function() { 
    $('#container').highcharts("StockChart", { 
     chart: { 
      type: 'column',//One can change chart_type to spline or line. 
      inverted:0 
     }, 
     title: { 
      text: 'Title of the chart', 
      style: { 
       fontFamily: "lato" 
      } 
     }, 
     subtitle: { 
      text: '', 
      style: { 
       fontFamily: "lato" 
      } 
     }, 

     yAxis: 
     { 
      gridLineWidth: 0, 

      title: { 
       text: '', 
      }, 
      labels:{ 
       enabled:0, 
       formatter: function() { 
        return this.value; ; 
       } 
      }, 
      stackLabels:{ 
       enabled:0 
      }, 

      //min:1,// Avoided generally so in if clause, to handle specific cases. 


     }, 
     tooltip: { 
      enabled: 1, 
      formatter: function() { 
       return new Date(this.x).toDateString(); ; 
      } 
     }, 
     legend:{ 
      enabled:1 
     }, 
     plotOptions: { 
      column: { 
       dataLabels: { 

        color: 'white', 

        enabled: 1, 
        style: { 
         //textShadow: '0 0 3px white, 0 0 3px white' 
        }, 


        formatter:function(){ 
         if (this.y) return this.y; 
        }, 
        y:0 
        //color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || '#wihte', 


       }, 
       enableMouseTracking: true 
      }, 
      series: { 

        stacking: 'normal', //null , normal , percent 

      } 
     }, 
     series: [{'color': '#009add', 'data': [[1385625600000, 0], [1408003200000, 0], [1408348800000, 0], [1408521600000, 3], [1408608000000, 0]], 'name': 'TYPE1'}, {'color': '#f15d22', 'data': [[1385625600000, 0], [1408003200000, 1], [1408348800000, 0], [1408521600000, 0], [1408608000000, 0]], 'name': 'TYPE2'}, {'color': '#7182a6', 'data': [[1385625600000, 1], [1408003200000, 0], [1408348800000, 0], [1408521600000, 0], [1408608000000, 0]], 'name': 'TYPE3'}, {'color': '#62a60a', 'data': [[1385625600000, 0], [1408003200000, 0], [1408348800000, 2], [1408521600000, 1], [1408608000000, 2]], 'name': 'TYPE4'}] 

     ,legend: { 
      enabled: true, 
      align: 'right', 
      //backgroundColor: '#FCFFC5', 
      //borderColor: 'black', 
      //borderWidth: 2, 
      layout: 'vertical', 
      verticalAlign: 'top', 
      y: 100, 
      shadow: true 
     }, 



    }); 
}); 
+0

它是由顺序轴引起的,请参阅禁用的'ordinal'选项:http://jsfiddle.net/sg7ykLpe/2/顺便说一句,它被称为刻度,而不是Highcharts中的类别;) – 2014-09-04 12:09:24

回答

1

使用tickPositions然后通过formatter转换您的标签在你的情况下的值

xAxis: { 
    // in tick position set all x axis values by this tick will come on this position  
    tickPositions: [1385625600000, 1408003200000, 1408348800000, 1408521600000, 1408608000000], 
    labels: { 
     /** then by formattor function change our tick value in desired result 
     * here we convert date string in date format like dd/mm/yy 
     **/ 
     formatter: function() { 
      return new Date(this.value).getDate()+"/"+(new Date(this.value).getMonth()+1)+"/"+new Date(this.value).getYear() ; 
     } 
    } 

Live DEMO