Highcharts - 具有多重轴的图表

上一章节
下一章节

我们已经在 Highcharts 配置语法章节中了解了用于绘制图表所用配置。

下面提供了一个具有多重轴的组合图的示例。

配置

现在让我们了解所采取的附加配置/步骤。

yAxis

在 yAxis 的其他属性中添加多个 yAxis 值。

var yAxis = [
   { // Primary yAxis 
   }, 
   
   { // Secondary yAxis
   }, 
   
   { // Tertiary yAxis
   }
]

示例

highcharts_combinations_axes.htm

在线演示 
<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://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 = {
               zoomType: 'xy'
            };
            var subtitle = {
               text: 'Source: WorldClimate.com'   
            };
            var title = {
               text: 'Average Monthly Weather Data for Tokyo'   
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 
                  'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
               crosshair: true
            };
            var yAxis = [
               { // Primary yAxis
                  labels: {
                     format: '{value}\xB0C',
                     style: {
                        color: Highcharts.getOptions().colors[2]
                     }
                  },
                  title: {
                     text: 'Temperature',
                     style: {
                        color: Highcharts.getOptions().colors[2]
                     }
                  },
                  opposite: true
               }, 
               { // Secondary yAxis
                  title: {
                     text: 'Rainfall',
                     style: {
                        color: Highcharts.getOptions().colors[0]
                     }
                  },
                  labels: {
                     format: '{value} mm',
                     style: {
                        color: Highcharts.getOptions().colors[0]
                     }
                  }
               }, 
               { // Tertiary yAxis
                  gridLineWidth: 0,
                  title: {
                     text: 'Sea-Level Pressure',
                     style: {
                        color: Highcharts.getOptions().colors[1]
                     }
                  },
                  labels: {
                     format: '{value} mb',
                     style: {
                        color: Highcharts.getOptions().colors[1]
                     }
                  },
                  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: 'Sea-Level Pressure',
                  type: 'spline',
                  yAxis: 2,
                  data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2,
                     1013.1, 1016.9, 1018.2, 1016.7],
                  marker: {
                     enabled: false
                  },
                  dashStyle: 'shortdot',
                  tooltip: {
                     valueSuffix: ' mb'
                  }
               },
               {
                  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_combinations.htm
打印页面
上一章节
下一章节
广告