Highcharts-3d-column-null

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

Null値と0値を持つ3D縦棒グラフ

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

null値と0値を持つ3D縦棒グラフの例を以下に示します。

構成

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

chart.options3d

チャートタイプを3Dベースに構成します。 タイプを「列」に設定します。 3次元でグラフをレンダリングするオプション。

var chart = {
   type: 'column',
   options3d: {
      enabled: true,
      alpha: 15,
      beta: 15,
      depth: 50,
      viewDistance: 25
   }
};

*_highcharts_3d_column_null_*
<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-3d.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: 'column',
               margin: 75,

               options3d: {
                  enabled: true,
                  alpha: 10,
                  beta: 25,
                  depth: 70
               }
            };
            var title = {
               text: '3D chart with null values'
            };
            var subtitle = {
               text: 'Notice the difference between a 0 value and a null point'
            };
            var xAxis = {
               categories: Highcharts.getOptions().lang.shortMonths
            };
            var yAxis = {
               title: {
                  text: null
               }
            };
            var series = [{
               name: 'Sales',
               data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3]
            }];
            var json = {};
            json.chart = chart;
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.series = series;
            $('#container').highcharts(json);
         });
      </script>
   </body>

</html>

結果

結果を確認します。