小兔网

Highcharts 组合图Highcharts 组合图

以下实例演示了双Y轴, 柱形图,线条图组合。

我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。

配置

yAxis 配置

在 yAxis 属性中添加两条Y轴的值 。

var yAxis = [{ // 第一条Y轴        }, { // 第二条Y轴   }}]

实例

文件名:highcharts_combinations_dualaxes.htm

<html><head><meta charset="UTF-8" /><title>Highcharts 教程(zhishitu.com)</title><script src="/images/2021/07/13/06/2021071306565915148651.js"></script><script src="/images/2021/07/13/06/2021071306565915329872.js"></script></head><body><div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div><script language="JavaScript">$(document).ready(function() {     var chart = {      zoomType: 'xy'   };   var subtitle = {      text: 'Source: zhishitu.com'      };   var title = {      text: '东京的月平均气温和降雨量'      };   var xAxis = {      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],      crosshair: true   };   var yAxis= [{ // 第一条Y轴      labels: {         format: '{value}\xB0C',         style: {            color: Highcharts.getOptions().colors[1]         }      },      title: {         text: 'Temperature',         style: {            color: Highcharts.getOptions().colors[1]         }      }   }, { // 第二条Y轴      title: {         text: 'Rainfall',         style: {            color: Highcharts.getOptions().colors[0]         }      },      labels: {         format: '{value} mm',         style: {            color: Highcharts.getOptions().colors[0]         }      },      opposite: true   }];   var tooltip = {      shared: true   };   var legend = {      layout: 'vertical',      align: 'left',      x: 120,      verticalAlign: 'top',      y: 100,      floating: true,      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'   };   var series= [{         name: 'Rainfall',            type: 'column',            yAxis: 1,            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],            tooltip: {                valueSuffix: ' mm'            }         }, {            name: 'Temperature',            type: 'spline',            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],            tooltip: {                valueSuffix: '\xB0C'           }        }   ];              var json = {};      json.chart = chart;      json.title = title;   json.subtitle = subtitle;         json.xAxis = xAxis;   json.yAxis = yAxis;   json.tooltip = tooltip;     json.legend = legend;     json.series = series;   $('#container').highcharts(json);  });</script></body></html>

以上实例输出结果为:

Highcharts 组合图Highcharts 组合图