Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

円グラフやドーナツグラフを作成する

OutSystemsで簡単な円グラフやドーナツグラフを作成する方法について説明しています。
最初のチャートを作成する場合は、スライスの数が一定の円グラフから始めます。

スライスの数が一定の円グラフまたはドーナツグラフを作成する

スライスの数が一定の円グラフまたはドーナツグラフを作成するには、以下の手順を実行します。

  1. モバイルアプリケーションの場合は、ツールボックスからPie ChartまたはDonut Chartを画面にドラッグします。
    Webアプリケーションの場合は、ドーナツグラフを作成する場合でも、ツールボックスからPie Chartを画面にドラッグします。手順の最後に、Webアプリケーションで円グラフをドーナツグラフに変換します。

  2. チャートのプロパティで、SourceDataPointListの左側にある+をクリックして、データポイントを1つ含むリストを作成します。

    各データポイントは円グラフまたはドーナツグラフの1つのスライスに対応します。

  3. データポイント[0]の左側にある+をクリックし、データポイントのLabelプロパティとValueプロパティを設定します。

    オプションで、データポイントTooltipおよびColorを設定することもできます。
    ヒント: これらのプロパティは、Aggregateのリストのアトリビュートのように実行時に変化する値に設定することができます。

  4. 別のデータポイントを追加するには、手順2および3を繰り返します。

モジュールをパブリッシュした後、ブラウザまたはデバイスで画面を開いてチャートを確認できます。

スライスの数が変化する円グラフまたはドーナツグラフを作成する

開始する前に、チャートで使用するデータポイントのリストが準備済みであることを確認してください。各データポイントにラベルと数値が含まれている必要があります。

スライスの数が変化する円グラフまたはドーナツグラフを作成するには、以下の手順を実行します。

  1. モバイルアプリケーションの場合は、ツールボックスからPie ChartまたはDonut Chartを画面にドラッグします。
    Webアプリケーションの場合は、ドーナツグラフを作成する場合でも、ツールボックスからPie Chartを画面にドラッグします。手順の最後に、Webアプリケーションで円グラフをドーナツグラフに変換します。

  2. チャートのプロパティで、SourceDataPointListをチャートのデータポイントを含むリストに設定します。

  3. SourceDataPointListLabelValueを、チャートのデータポイントを含むリストの適切なアトリビュートにマッピングします。

モジュールをパブリッシュした後、ブラウザまたはデバイスで画面を開いてチャートを確認できます。

Webアプリケーションで円グラフをドーナツグラフに変換する

Webアプリケーションで円グラフをドーナツグラフに変換するには、以下の手順を実行します。

  • 円グラフのプロパティで、AdvancedFormatの左側にある+をクリックし、HighChartsJSONプロパティに以下のJSONスニペットを追加します。

    "plotOptions: {
        pie: {
            innerSize: '50%'
        }
    }"
    

モジュールをパブリッシュした後、ブラウザまたはデバイスで画面を開いてチャートを確認できます。

  • Was this article helpful?