2013-08-07 48 views
2

我現在有如下圖設置在Highcharts如何放置在Highchart相反Y軸標籤,沒有第二個系列

// Initialize the chart when the document loads. 
$(document).ready(function() { 
    $('#results').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: '' 
     }, 
     xAxis: [{ 
      categories: [ 
       'Injustice: Gods Among Us ★', 
       'Tekken Tag Tournament 2 ★', 
       'Super Smash Bros. Melee ★', 
       'Persona 4 Arena', 
       'King of Fighters XIII', 
       'Dead or Alive 5 Ultimate', 
       'Street Fighter X Tekken Ver. 2013', 
       'Soulcalibur V' 
      ], 
     }], 
     yAxis: { 
      allowDecimals: false, 
      title: { 
       text: 'Votes' 
      } 
     }, 
     series: [{ 
      data: [ 
       {y:1426,color:'#29A329'},{y:823,color:'#29A329'}, 
       {y:462,color:'#29A329'},{y:305,color:'#CC0000'}, 
       {y:181,color:'#CC0000'},{y:148,color:'#CC0000'}, 
       {y:127,color:'#CC0000'},{y:115,color:'#CC0000'} 
      ], 
      dataLabels: { 
       color: '#FFFFFF', 
       enabled: true, 
       inside: true 
      }, 
      showInLegend: false, 
      name: 'Votes' 
     }] 
    }); 
}); 

這將產生一個圖表,看起來像這樣:

Chart with single Y axis.

我想要做的是在Y軸上的對面有一個標籤(它是一個字符串,沒有什麼特別的)。

我可以添加其他系列空的數據點,並用下面的代碼添加得到我想要的標籤(我編寫的代碼到從服務器端的頁面來獲得這種效果):

// Initialize the chart when the document loads. 
$(document).ready(function() { 
    $('#results').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: '' 
     }, 
     xAxis: [{ 
      categories: [ 
       'Injustice: Gods Among Us ★', 
       'Tekken Tag Tournament 2 ★', 
       'Super Smash Bros. Melee ★', 
       'Persona 4 Arena', 
       'King of Fighters XIII', 
       'Dead or Alive 5 Ultimate', 
       'Street Fighter X Tekken Ver. 2013', 
       'Soulcalibur V' 
     ], 
     }, { 
      categories: [ 
       '8/5/2013 8:59 PM', 
       '8/5/2013 12:59 PM', 
       '8/5/2013 2:59 PM', 
       '8/5/2013 6:59 PM', 
       '8/5/2013 12:59 AM', 
       '8/5/2013 3:59 PM', 
       '8/5/2013 8:23 PM', 
       '8/5/2013 8:19 PM'], 
      opposite: true, 
      title: { 
       text: 'Last vote cast at' 
      } 
     }], 
     yAxis: { 
      allowDecimals: false, 
      title: { 
       text: 'Votes' 
      } 
     }, 
     series: [{ 
      data: [{ 
       y: 1426, 
       color: '#29A329' 
      }, { 
       y: 823, 
       color: '#29A329' 
      }, { 
       y: 462, 
       color: '#29A329' 
      }, { 
       y: 305, 
       color: '#CC0000' 
      }, { 
       y: 181, 
       color: '#CC0000' 
      }, { 
       y: 148, 
       color: '#CC0000' 
      }, { 
       y: 127, 
       color: '#CC0000' 
      }, { 
       y: 115, 
       color: '#CC0000' 
      }], 
      dataLabels: { 
       color: '#FFFFFF', 
       enabled: true, 
       inside: true 
      }, 
      showInLegend: false, 
      name: 'Votes', 
      xAxis: 1 
     }, { 
      data: [0, 0, 0, 0, 0, 0, 0, 0], 
      showInLegend: false 
     }] 
    }); 
}); 

jsFiddle

這讓我幾乎正是我想要什麼,除了一兩件事,酒吧現在更薄,因爲空間是爲了適應並不意味着要顯示的假數據系列:

Multiple series in a chart, one with no data

的問題是,我如何才能在右側的標籤,如果沒有這些副作用?請注意,我不一定需要第二個數據系列,它只是關閉我已經找到了解決方案。只要條形圖顯示正常,我不介意右側的這些值被寫入的機制。

回答

6

你想要一個鏈接軸http://jsfiddle.net/U5Dhw/

xAxis: [{ 
      categories: ['Injustice: Gods Among Us ★', 'Tekken Tag Tournament 2 ★', 'Super Smash Bros. Melee ★', 'Persona 4 Arena', 'King of Fighters XIII', 'Dead or Alive 5 Ultimate', 'Street Fighter X Tekken Ver. 2013', 'Soulcalibur V'], 
     }, 
     { 
     categories: ['Fred', 'Tom', 'Bill', 'David', 'Nathan', 'Charles', 'Mike', 'Andrew'], 
      linkedTo: 0, 
      opposite: true 
     }], 

http://api.highcharts.com/highcharts#xAxis.linkedTo