带双轴的仪表（Gauge with dual axes）

优质

小牛编辑

122浏览

2023-12-01

我们已经在Highcharts Configuration Syntax一章中看到了用于绘制图表的配置。

下面给出了具有双轴的仪表图的示例。

配置 (Configurations)

现在让我们看一下所采取的其他配置/步骤。

chart.type

将图表类型配置为基于计量。将类型设置为“规格”。

var chart = {
   type: 'guage'
};

pane

这仅适用于极坐标图和角度计。此配置对象包含组合的X和Y轴组的常规选项。每个xAxis或yAxis都可以通过索引引用窗格。

var pane = {
   startAngle: -150,
   endAngle: 150
};

例子 (Example)

highcharts_guage_dualaxes.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>    
      <script src = "https://code.highcharts.com/highcharts-more.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: 'gauge',
               plotBackgroundColor: null,
               plotBackgroundImage: null,
               plotBorderWidth: 0,
               plotShadow: false	 
            };
            var credits = {
               enabled: false
            };
            var title = {
               text: 'Speedometer with dual axes'
            };
            var pane = {
               startAngle: -150,
               endAngle: 150
            };
            // the value axis
            var yAxis = [
               {
                  min: 0,
                  max: 200,
                  lineColor: '#339',
                  tickColor: '#339',
                  minorTickColor: '#339',
                  offset: -25,
                  lineWidth: 2,
                  labels: {
                     distance: -20,
                     rotation: 'auto'
                  },
                  tickLength: 5,
                  minorTickLength: 5,
                  endOnTick: false
               }, 
               {
                  min: 0,
                  max: 124,
                  tickPosition: 'outside',
                  lineColor: '#933',
                  lineWidth: 2,
                  minorTickPosition: 'outside',
                  tickColor: '#933',
                  minorTickColor: '#933',
                  tickLength: 5,
                  minorTickLength: 5,
                  labels: {
                     distance: 12,
                     rotation: 'auto'
                  },
                  offset: -20,
                  endOnTick: false
               }
            ];
            var series = [
               {
                  name: 'Speed',
                  data: [80],
                  dataLabels: {
                     formatter: function () {
                        var kmh = this.y,
                        mph = Math.round(kmh * 0.621);
                        return '<span style = "color:#339">' +
                           kmh + ' km/h</span><br/>' +
                           '<span style = "color:#933">' + mph + ' mph</span>';
                     },
                     backgroundColor: {
                        linearGradient: {
                           x1: 0,
                           y1: 0,
                           x2: 0,
                           y2: 1
                        },
                        stops: [
                           [0, '#DDD'],
                           [1, '#FFF']
                        ]
                     }
                  },
                  tooltip: {
                     valueSuffix: ' km/h'
                  }
               }
            ];     
            var json = {};   
            json.chart = chart; 
            json.credits = credits;
            json.title = title;       
            json.pane = pane; 
            json.yAxis = yAxis;    
            json.series = series;      
            // Add some life
            var chartFunction = function (chart) {
               setInterval(function () {
                  var point = chart.series[0].points[0],
                     newVal,
                     inc = Math.round((Math.random() - 0.5) * 20);
                  newVal = point.y + inc;
                  if (newVal < 0 || newVal > 200) {
                     newVal = point.y - inc;
                  }
                  point.update(newVal);
               }, 3000);
            };
            $('#container').highcharts(json, chartFunction);  
         });
      </script>
   </body>
</html>