如何旋轉我的HighCharts條形圖，使其垂直而非水平？

enter image description here 如何旋轉我的HighCharts條形圖，使其垂直而非水平？

$(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軸出於某種原因...

來源

2012-06-27 John Zumbrum

很酷我還想要一個旋轉的圖表！ – gdoron

Vetical柱狀圖在Highchart稱爲column的。

更改此：

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

見這裏的例子：http://jsfiddle.net/aznBb/

來源

2012-06-27 22:05:24

好吧......那很容易 – Vic

要在莫恩扎曼的答案擴大，我打了他的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布爾值，那會很好。

來源

2014-02-12 21:14:49 StevenClontz

你知道標題是否可以顛倒嗎？ –

這裏是標題的API：http://api.highcharts.com/highcharts#title 我不是HighCharts的專家，但我會假設設置將在那裏（並且它似乎不是一個選項）。但是，如果適合您的需求，您可以將它移動一下：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts /標題/ verticalalign / – StevenClontz

你應該嘗試這樣的事：

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

來源

2017-01-11 15:16:02

如何旋轉我的HighCharts條形圖，使其垂直而非水平？

回答

相關問題