Highcharts - 扇形图表

上一个
下一个

我们已经看到了在Highcharts 配置语法一章中使用的配置，用于绘制图表。

下面给出了扇形图表的示例。

配置

现在让我们看看采取的额外配置/步骤。

chart.type

将图表类型配置为基于仪表。将类型设置为“gauge”。

var chart = {
   type: 'guage'
};

pane

此类型仅适用于极坐标图表和扇形图表。此配置对象保存针对设置的组合 X 轴和 Y 轴的常规选项。每个 xAxis 或 yAxis 都可通过索引引用仪表盘。

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

示例

highcharts_guage_angular.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 title = {
               text: 'Speedometer'   
            };     
            var pane = {
               startAngle: -150,
               endAngle: 150,
               background: [
                  {
                     backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                           [0, '#FFF'],
                           [1, '#333']
                        ]
                     },
                     borderWidth: 0,
                     outerRadius: '109%'
                  }, 
                  {
                     backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                           [0, '#333'],
                           [1, '#FFF']
                        ]
                     },
                     borderWidth: 1,
                     outerRadius: '107%'
                  }, 
                  {
                     // default background
                  }, 
                  {
                     backgroundColor: '#DDD',
                     borderWidth: 0,
                     outerRadius: '105%',
                     innerRadius: '103%'
                  }
               ]
            };
            
            // the value axis
            var yAxis = {
               min: 0,
               max: 200,

               minorTickInterval: 'auto',
               minorTickWidth: 1,
               minorTickLength: 10,
               minorTickPosition: 'inside',
               minorTickColor: '#666',

               tickPixelInterval: 30,
               tickWidth: 2,
               tickPosition: 'inside',
               tickLength: 10,
               tickColor: '#666',
               
               labels: {
                  step: 2,
                  rotation: 'auto'
               },
               title: {
                  text: 'km/h'
               },
               plotBands: [
                  {
                     from: 0,
                     to: 120,
                     color: '#55BF3B' // green
                  }, 
                  {
                     from: 120,
                     to: 160,
                     color: '#DDDF0D' // yellow
                  }, 
                  {
                     from: 160,
                     to: 200,
                     color: '#DF5353' // red
                  }
               ]
            };
            var series = [{
               name: 'Speed',
               data: [80],
               tooltip: {
                  valueSuffix: ' km/h'
               }
            }];     
            var json = {};   
            json.chart = chart; 
            json.title = title;       
            json.pane = pane; 
            json.yAxis = yAxis; 
            json.series = series;     
            
            // Add some life
            var chartFunction = function (chart) {
               if (!chart.renderer.forExport) {
                  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>

结果

验证结果。

highcharts_angular_gauges.htm
打印页面
上一个
下一个
广告