円グラフやドーナツグラフを作成する
OutSystemsで簡単な円グラフやドーナツグラフを作成する方法について説明しています。
最初のチャートを作成する場合は、スライスの数が一定の円グラフから始めます。
スライスの数が一定の円グラフまたはドーナツグラフを作成する
スライスの数が一定の円グラフまたはドーナツグラフを作成するには、以下の手順を実行します。
1.モバイルアプリケーションの場合は、ツールボックスからPie ChartまたはDonut Chartを画面にドラッグします。
Webアプリケーションの場合は、ドーナツグラフを作成する場合でも、ツールボックスからPie Chartを画面にドラッグします。手順の最後に、Webアプリケーションで円グラフをドーナツグラフに変換します。
1.チャートのプロパティで、SourceDataPointListの左側にある+をクリックして、データポイントを1つ含むリストを作成します。
各データポイントは円グラフまたはドーナツグラフの1つのスライスに対応します。
1.データポイント[0]の左側にある+をクリックし、データポイントのLabelプロパティとValueプロパティを設定します。
オプションで、[データポイント](../auto/charts-api.final.md#Structure_DataPoint)に**Tooltip**および**Color**を設定することもできます。
ヒント: これらのプロパティは、Aggregateのリストのアトリビュートのように実行時に変化する値に設定することができます。
1.別のデータポイントを追加するには、手順2および3を繰り返します。
モジュールをパブリッシュした後、ブラウザまたはデバイスで画面を開いてチャートを確認できます。
スライスの数が変化する円グラフまたはドーナツグラフを作成する
開始する前に、チャートで使用するデータポイントのリストが準備済みであることを確認してください。各データポイントにラベルと数値が含まれている必要があります。
スライスの数が変化する円グラフまたはドーナツグラフを作成するには、以下の手順を実行します。
1.モバイルアプリケーションの場合は、ツールボックスからPie ChartまたはDonut Chartを画面にドラッグします。
Webアプリケーションの場合は、ドーナツグラフを作成する場合でも、ツールボックスからPie Chartを画面にドラッグします。手順の最後に、Webアプリケーションで円グラフをドーナツグラフに変換します。
1.チャートのプロパティで、SourceDataPointListをチャートのデータポイントを含むリストに設定します。
1.SourceDataPointListのLabelとValueを、チャートのデータポイントを含むリストの適切なアトリビュートにマッピングします。
モジュールをパブリッシュした後、ブラウザまたはデバイスで画面を開いてチャートを確認できます。
Webアプリケーションで円グラフをドーナツグラフに変換する
Webアプリケーションで円グラフをドーナツグラフに変換するには、以下の手順を実行します。
-
円グラフのプロパティで、AdvancedFormatの左側にある+をクリックし、HighChartsJSONプロパティに以下のJSONスニペットを追加します。
"plotOptions: { pie: { innerSize: '50%' } }"
モジュールをパブリッシュした後、ブラウザまたはデバイスで画面を開いてチャートを確認できます。