Angular-highcharts-3d-column

Angular Highcharts-立体柱状チャート

以下は3D縦棒グラフの例です。

link：/angular_highcharts/angular_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。

3D縦棒グラフの例を以下に示します。

構成

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

option3D

縦棒グラフタイプを3Dベースに構成します。 Options3D は、有効な3Dオプションを設定します。

chart: {
   options3d: {
      enabled: true,
      alpha: 15,
      beta: 15,
      depth: 50,
      viewDistance: 25
   }
}

例

*_app.component.ts_*

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import highcharts3D from 'highcharts/highcharts-3d.src';
highcharts3D(Highcharts);
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {
      chart: {
         renderTo: 'container',
         type: 'column',
         margin: 75,
         options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
         }
      },
      title : {
         text: 'Chart rotation demo'
      },
      plotOptions : {
         column: {
            depth: 25
         }
      },
      series : [{
         data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4,
                 194.1, 95.6, 54.4]
      }]
   };
}

結果

結果を確認します。

3D縦棒グラフ