HighCharts棒グラフを水平ではなく垂直にするにはどうすればよいですか？

Question

$(document).ready(function() { 
chart1 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'QueryResultsChart', 
     type: 'bar' 
    }, 
    title: { 
     text: 'Production History' 
    }, 
    xAxis: { 
     title: { 
      text: 'Production Day' 
     }, 
     type: 'datetime' 
    }, 
    yAxis: { 
     title: { 
      text: 'Gross Production' 
     } 
    }, 
    series: [{ 
     name: 'Data', 
     data: [] 
    }] 
}); 
chart1.series[0].setData(". json_encode($aChartData) ."); 
}); 

データが正しいがあり、それはいくつかの理由でY軸上の私のx軸を見せて、...

Answer 1

Vetical棒グラフはHighchartにcolumn年代と呼ばれています。

type: 'column' //was 'bar' previously

ここでは例を参照してください：この

変更http://jsfiddle.net/aznBb/

Answer 2

をMoinザーマンの答えに展開するには、私は彼のjsfiddle http://jsfiddle.net/aznBb/と共演し、これを見つけました。

です。

chart: { 
    type: 'bar', 
    inverted: false // default 
} 

これはも水平です。

chart: { 
    type: 'bar', 
    inverted: true 
} 

これは垂直です。

chart: { 
    type: 'column', 
    inverted: false // default 
} 

これは水平であると明らかに棒グラフと同じ。

chart: { 
    type: 'column', 
    inverted: true 
} 

非常に奇妙です。私はtype: 'bar'エイリアスtype: 'column'と実際に何が設定されているかにかかわらず、inverted: trueを強制することしか推測できません。それはちょうどinvertedのブール値をトグルすればいいでしょう。

Answer 3

あなたはこのような何か試してみてください：

$(function() { 

Highcharts.chart('container', { 

    chart: { 
     type: 'columnrange', 
     inverted: false 
    }, 

    title: { 
     text: 'Temperature variation by month' 
    }, 

    subtitle: { 
     text: 'Observed in Vik i Sogn, Norway' 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    yAxis: { 
     title: { 
      text: 'Temperature (°C)' 
     } 
    }, 

    tooltip: { 
     valueSuffix: '°C' 
    }, 

    plotOptions: { 
     columnrange: { 
      dataLabels: { 
       enabled: true, 
       formatter: function() { 
        return this.y + '°C'; 
       } 
      } 
     } 
    }, 

    legend: { 
     enabled: false 
    }, 

    series: [{ 
     name: 'Temperatures', 
     data: [ 
      [-9.7, 9.4], 
      [-8.7, 6.5], 
      [-3.5, 9.4], 
      [-1.4, 19.9], 
      [0.0, 22.6], 
      [2.9, 29.5], 
      [9.2, 30.7], 
      [7.3, 26.5], 
      [4.4, 18.0], 
      [-3.1, 11.4], 
      [-5.2, 10.4], 
      [-13.5, 9.8] 
     ] 
    }] 

}); 

を}）;

http://jsfiddle.net/b940oyw4/