2014-02-17 109 views
2

我有一張圖表,比較了多年來兩個人的布爾數據。Highcharts - 分類y軸的標籤放置位置

下面的jsfiddle代表我需要的東西,除了我需要底部軸上的標籤與紅色和綠色塊的中心對齊,並且沒有5出現在最右邊的刻度上。

http://jsfiddle.net/zzella/Xa46f/3/

任何人有任何想法如何實現這一點對於上面的圖表,或者有更好的方式來組織數據,以獲得我需要的結果嗎?

$(function() { 
$('#container').highcharts({ 
    credits: { 
     enabled: false 
    }, 
    exporting: { 
     enabled: false 
    }, 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Action completed for year (Yes/No)' 
    }, 
    xAxis: { 
     categories: ['Person 1', 'Person 2'], 
     labels: { 
      align: 'left', 
      style: { 
       fontSize: '13px', 
       fontFamily: 'Arial' 
      }, 
      y: -45, 
      x: 60 
     }, 
     lineColor: '#FFFFFF', 
     tickColor: '#FFFFFF', 

    }, 
    yAxis: { 
     type: 'category', 
     categories: ["2010","2011","2012","2013", "2014"], 
     title: false, 
     lineColor: '#FFFFFF', 
     tickColor: '#FFFFFF', 
     gridLineColor: '#FFFFFF', 
    }, 
    legend: false, 
    plotOptions: { 
     bar: { 
      stacking: 'normal', 
      dataLabels: { 
       enabled: true, 
       color: '#FFFFFF', 
       align: 'center', 
       style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif', 
        textShadow: '0 0 3px black' 
       }, 
       formatter: function() { 
        console.log(this); 
        return this.key 
       } 
      }, 
     }, 
    }, 
    series: [{ 
     name: '2014', 
     data: [{ 
      name: "2014: no", 
      color: "#a50000", 
      y: 1 
     }, { 
      name: "2014: yes", 
      color: "#006500", 
      y: 1 
     }], 

    }, { 
     name: '2013', 
     data: [{ 
      name: "2013: yes", 
      color: "#006500", 
      y: 1 
     }, { 
      name: "2013: yes", 
      color: "#006500", 
      y: 1 
     }] 
    }, { 
     name: '2012', 
     data: [{ 
      name: "2012: yes", 
      color: "#006500", 
      y: 1 
     }, { 
      name: "2012: no", 
      color: "#a50000", 
      y: 1 
     }] 
    }, { 
     name: '2011', 
     data: [{ 
      name: "2011: no", 
      color: "#a50000", 
      y: 1 
     }, { 
      name: "2011: yes", 
      color: "#006500", 
      y: 1 
     }] 
    }, { 
     name: '2010', 
     data: [{ 
      name: "2010: no", 
      color: "#a50000", 
      y: 1 
     }, { 
      name: "2010: no", 
      color: "#a50000", 
      y: 1 
     }] 
    }] 
}); 
}); 

回答

1

個等待實現,這是通過添加標籤格式,以您的yAxis,像你這樣你xAxis。如果您添加labels: { x: 40 },標籤將沿着方框居中。

要擺脫隨機5,你可以做showLastLabel: false

下面是最終yAxis,做你所描述的:

yAxis: { 
    type: 'category', 
    categories: ["2010","2011","2012","2013", "2014"], 
    title: false, 
    lineColor: '#FFFFFF', 
    tickColor: '#FFFFFF', 
    gridLineColor: '#FFFFFF', 
    labels: { 
     x: 40 
    }, 
    showLastLabel: false 
}, 

Link to the Fiddle