¿Cómo giro mi gráfico de barras HighCharts para que sea vertical, no horizontal?

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) ."); 
}); 

los datos están ahí una correcta, es sólo mostrar mis ejeX en el eje Y por alguna razón ...

Answer 1

gráficos de barras se llaman Vetical column 's en Highchart.

cambiar esta situación:

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

Ver ejemplo aquí: http://jsfiddle.net/aznBb/

Answer 2

Para ampliar la respuesta de Moín Zaman, jugaba con su jsFiddle http://jsfiddle.net/aznBb/ y encontré esto.

Esto es horizontal.

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

Ésta es también horizontal.

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

Ésta es verticales.

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

Esta es horizontal y aparentemente idénticos a los gráficos de barras.

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

Muy extraño. Solo puedo adivinar que type: 'bar' alias type: 'column' y fuerza inverted: true sin importar en qué se establezca. Sería bueno si solo se alternara el booleano inverted.

Answer 3

Debe intentar algo como esto:

$(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/