Highcharts X軸和Y軸翻轉
阿新 • • 發佈:2018-12-09
一 程式碼
<html> <head> <meta charset="UTF-8" /> <title>Highcharts X軸和Y軸翻轉</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { var chart = { type: 'spline', //圖表的型別 inverted: true //圖表中的x,y軸對換。 }; var title = { text: '高空大氣溫度' }; var subtitle = { text: '標準大氣模型' }; //X軸 var xAxis = { reversed: false, title: { enabled: true, text: '高度' }, labels: { formatter: function () { return this.value + 'km'; } }, maxPadding: 0.05, showLastLabel: true }; //Y軸 var yAxis = { title: { text: '溫度' }, labels: { formatter: function () { return this.value + '\xB0'; } }, lineWidth: 2 }; var legend = { enabled: false }; //提示 var tooltip = { headerFormat: '<b>{series.name}</b><br/>', pointFormat: '{point.x} km: {point.y}\xB0C' }; //資料點選項 var plotOptions = { spline: { marker: { //圖表中繪圖中是否顯示點的標記符。 enable: false } } }; //資料 var series= [{ name: '溫度', data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1], [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]] }]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.legend = legend; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; $('#container').highcharts(json); }); </script> </body> </html>
二 測試結果