Highcharts X 轴翻转曲线图 - 学习 Hightcharts

下图是一个 Highcharts X 轴翻转曲线图

配置

配置图表类型 type 为 spline

配置属性 chart.type 默认为 "line"

配置属性 inverted 设置为 true 即 X 轴翻转，默认为 false

var chart = {
   type: 'spline',
   inverted: true
};

范例

下面的代码列出了 Highcharts X 轴翻转曲线图 的基本配置

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
<script>
var chart = {
   type: 'spline',
   inverted: true
}; 
var title = {
   text: 'Atmosphere Temperature by Altitude'   
};
var subtitle = {
   text: 'According to the Standard Atmosphere Model'
};
var xAxis = {
   reversed: false,
   title: {
      enabled: true,
      text: 'Altitude'
   },
   labels: {
      formatter: function () {
         return this.value + 'km';
      }
   },
   maxPadding: 0.05,
   showLastLabel: true
};
var yAxis = {
   title: {
      text: 'Temperature'
   },
   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: 'Temperature',
   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 options = {};

options.chart = chart;
options.title = title;
options.subtitle = subtitle;
options.xAxis = xAxis;
options.yAxis = yAxis;
options.legend = legend;
options.tooltip = tooltip;
options.plotOptions = plotOptions;
options.series = series;

var chart = Highcharts.chart('container',options);
</script>

运行范例 »

以上范例输出如下