मैं अपने हाईचर्ट्स बार चार्ट को कैसे घुमा सकता हूं ताकि इसकी ऊर्ध्वाधर, क्षैतिज न हो?

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

डेटा वहाँ एक सही है, यह सिर्फ yAxis पर मेरे xAxis किसी कारण से दिखा रहा है ...

Answer 1

vetical बार चार्ट Highchart में column के कहलाते हैं।

बदलें इस:

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

यहाँ उदाहरण देखें: http://jsfiddle.net/aznBb/

Answer 2

मोइन ज़मान के जवाब पर विस्तार करने के लिए, मैं उसकी 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/