ハイチャート-ドーナツチャート

以下はドーナツチャートの例です。

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

構成

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

チャート

円グラフの種類を構成します。 chart.type は、チャートのタイプを決定します。ここで、デフォルト値は「line」です。

var chart = {
   type: 'pie'
};

例

*_highcharts_pie_donut_*

<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 colors = Highcharts.getOptions().colors;
            var categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'];

            var data = [
               {
                  y: 55.11,
                  color: colors[0],
                  drilldown: {
                     name: 'MSIE versions',
                     categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
                     data: [10.85, 7.35, 33.06, 2.81],
                     color: colors[0]
                  }
               },
               {
                  y: 21.63,
                  color: colors[1],
                  drilldown: {
                     name: 'Firefox versions',
                     categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5',
                        'Firefox 3.6', 'Firefox 4.0'],

                     data: [0.20, 0.83, 1.58, 13.12, 5.43],
                     color: colors[1]
                  }
               },
               {
                  y: 11.94,
                  color: colors[2],
                  drilldown: {
                     name: 'Chrome versions',
                     categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0',
                        'Chrome 8.0', 'Chrome 9.0',
                        'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],

                     data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
                     color: colors[2]
                  }
               },
               {
                  y: 7.15,
                  color: colors[3],
                  drilldown: {
                     name: 'Safari versions',
                     categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0',
                        'Safari 4.1', 'Safari/Maxthon',
                        'Safari 3.1', 'Safari 4.1'],

                     data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
                     color: colors[3]
                  }
               },
               {
                  y: 2.14,
                  color: colors[4],
                  drilldown: {
                     name: 'Opera versions',
                     categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
                     data: [ 0.12, 0.37, 1.65],
                     color: colors[4]
                  }
               }
            ];
            var browserData = [];
            var versionsData = [];
            var i, j;
            var dataLen = data.length;
            var drillDataLen;
            var brightness;

           //Build the data arrays
            for (i = 0; i < dataLen; i += 1) {
              //add browser data
               browserData.push({
                  name: categories[i],
                  y: data[i].y,
                  color: data[i].color
               });

              //add version data
               drillDataLen = data[i].drilldown.data.length;

               for (j = 0; j < drillDataLen; j += 1) {
                  brightness = 0.2 - (j/drillDataLen)/5;
                  versionsData.push({
                     name: data[i].drilldown.categories[j],
                     y: data[i].drilldown.data[j],
                     color: Highcharts.Color(data[i].color).brighten(brightness).get()
                  });
               }
            }
            var chart = {
               type: 'pie'
            };
            var title = {
               text: 'Browser market share, April, 2011'
            };
            var yAxis = {
               title: {
                  text: 'Total percent market share'
               }
            };
            var tooltip = {
               valueSuffix: '%'
            };
            var plotOptions = {
               pie: {
                  shadow: false,
                  center: ['50%', '50%']
               }
            };
            var series = [
               {
                  name: 'Browsers',
                  data: browserData,
                  size: '60%',

                  dataLabels: {
                     formatter: function () {
                        return this.y > 5 ? this.point.name : null;
                     },
                     color: 'white',
                     distance: -30
                  }
               },
               {
                  name: 'Versions',
                  data: versionsData,
                  size: '80%',
                  innerSize: '60%',

                  dataLabels: {
                     formatter: function () {
                       //display only if larger than 1
                        return this.y > 1 ? '' + this.point.name + ': ' + this.y + '%' : null;
                     }
                  }
               }
            ];

            var json = {};
            json.chart = chart;
            json.title = title;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.series = series;
            json.plotOptions = plotOptions;
            $('#container').highcharts(json);
         });
      </script>
   </body>

</html>

結果

結果を確認します。

Highcharts-pie-donut

目次

ハイチャート-ドーナツチャート

構成

チャート

例

結果