Angular-googlecharts-pie-exploded
提供:Dev Guides
分解されたスライスを含む円グラフ
以下は、スライスを展開した円グラフの例です。
link:/angular_googlecharts/angular_googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、グラフを描画するために使用される構成を既に確認しました。 さて、スライスを展開した円グラフの例を見てみましょう。
構成
*slices* 構成を使用して、スライスを展開した円グラフを表示しました。
options = {
slices: {
1: {offset: 0.2},
3: {offset: 0.3}
},
};
例
*_app.component.ts_*
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.componentl',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Browser market shares at a specific website, 2014';
type = 'PieChart';
data = [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
];
columnNames = ['Browser', 'Percentage'];
options = {
slices: {
1: {offset: 0.2},
3: {offset: 0.3}
},
};
width = 550;
height = 400;
}
結果
結果を確認します。