Highcharts-guage-angular

提供:Dev Guides
移動先:案内検索

ハイチャート-角度ゲージチャート

link:/highcharts/highcharts_configuration_syntax [Highcharts設定構文]の章でチャートを描画するために使用される設定はすでに見ました。

角度ゲージチャートの例を以下に示します。

構成

ここで、追加の構成/実行された手順を見てみましょう。

chart.type

ゲージベースになるようにチャートタイプを構成します。 タイプを「ゲージ」に設定します。

var chart = {
   type: 'guage'
};

pane

このタイプは、極座標チャートと角度ゲージにのみ適用されます。 この構成オブジェクトは、X軸とY軸の組み合わせセットの一般的なオプションを保持します。 各xAxisまたはyAxisは、インデックスによってペインを参照できます。

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

*_highcharts_guage_angular_*
<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>

結果

結果を確認します。