Highcharts-bubble-3d

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

ハイチャート-3Dバブルチャート

以下は、3Dバブルチャートの例です。

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

3Dバブルチャートの例を以下に示します。

構成

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

チャート

チャートタイプをバブルベースに設定します。 chart.type は、チャートのシリーズタイプを決定します。 ここで、デフォルト値は「line」です。

チャートを構成してズーム可能にします。 chart.zoomType は、ユーザーがマウスをドラッグしてズームできる次元を決定します。 ここで、可能な値はx、yまたはxyです。

var chart = {
   type: 'bubble',
   zoomType: 'xy'
};

series.marker

シリーズのマーカーをグラデーションベースに構成して、3Dの雰囲気を与えます。

marker: {
   fillColor: {
      radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
      stops: [
         [0, 'rgba(255,255,255,0.5)'],
         [1, Highcharts.Color(
            Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
      ]
   }
}

*_highcharts_bubble_3d_*
<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: 'bubble',
               plotBorderWidth: 1,
               zoomType: 'xy'
            };
            var title = {
               text: 'Highcharts bubbles with radial gradient fill'
            };
            var xAxis = {
               gridLineWidth: 1
            };
            var yAxis = {
               startOnTick: false,
               endOnTick: false
            };
            var series = [
               {
                  data: [
                     [9,  81, 63],
                     [98, 5, 89],
                     [51, 50, 73],
                     [41, 22, 14],
                     [58, 24, 20],
                     [78, 37, 34],
                     [55, 56, 53],
                     [18, 45, 70],
                     [42, 44, 28],
                     [3,  52, 59],
                     [31, 18, 97],
                     [79, 91, 63],
                     [93, 23, 23],
                     [44, 83, 22]
                  ],
                  marker: {
                     fillColor: {
                        radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                        stops: [
                           [0, 'rgba(255,255,255,0.5)'],
                           [1, Highcharts.Color(
                           Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
                        ]
                     }
                  }
               },
               {
                  data: [
                     [42, 38, 20],
                     [6,  18,  1],
                     [1,  93, 55],
                     [57, 2,  90],
                     [80, 76, 22],
                     [11, 74, 96],
                     [88, 56, 10],
                     [30, 47, 49],
                     [57, 62, 98],
                     [4,  16, 16],
                     [46, 10, 11],
                     [22, 87, 89],
                     [57, 91, 82],
                     [45, 15, 98]
                  ],
                  marker: {
                     fillColor: {
                        radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                        stops: [
                           [0, 'rgba(255,255,255,0.5)'],
                           [1, Highcharts.Color(
                              Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
                        ]
                     }
                  }
               }
            ];

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

</html>

結果

結果を確認します。