Skip to main content

 

参考情報

 

OutSystems

サンプルチャートを作成する

チャートウィジェットの作成はOutSystemsの他のウィジェットの作成と同じです。たとえば、縦棒グラフを作成するには、以下の手順を実行します。

  1. Column Chartウィジェットを画面にドラッグします。
  2. ウィジェットのSourceDataPointListプロパティで、チャートの描画に使用するDataPointのリストを選択します。
  3. その他のプロパティを確認してモジュールをパブリッシュします。

チャートの基本プロパティを示すため、サンプルデータをいくつか生成してビジュアルプロパティを変更する手順を以下に説明します。

サンプルデータを生成する

サンプルデータをいくつか生成してチャートウィジェットに渡します。その後で、色、系列ラベル、ツールチップを変更します。

  1. 画面を作成し、ローカルパラメータDataPointList(データ型はList)、DataPoint(DataPoint)、Count(Integer)、MaxSteps(Integer)を追加します。
  2. Webの場合は、Preparationを作成します。モバイルの場合は、OnReadyアクションを開きます。
  3. Assignツールを追加し(「Initialize」というラベルを付けます)、MaxSteps = 10Count = 1を割り当てます。
  4. Assignツールをさらに追加し(「Values to DataPoint」というラベルを付けます)、DataPoint.Value = 1DataPoint.Label = IntegerToText(Count)を割り当てます。
  5. Webの場合は、Run Server Actionを追加します。モバイルの場合は、Run Client Actionを追加します。アクションとしてListAppendを選択します。「Values to DataPoint」を接続して以下の値を割り当てます。

  6. Assignツールをさらに追加して「Increment Count」というラベルを付け、Countを1ずつ増やします(Count = Count + 1)。

  7. Ifツールに接続し、CountMaxStepsに等しいかどうかを確認します。Trueの場合は、ループを終了します。Falseの場合は、「Values to DataPoint」に接続します。フローは以下のようになります。

チャートを作成する

Column Chartウィジェットを画面にドラッグ&ドロップし、SourceDataPointListプロパティで、生成したDataPointListを選択します。アプリを実行します。以下のチャートが作成されます。

色、ラベル、系列名を変更する

系列名やラベルを追加したり色を変更したりするには、DataPoint変数にプロパティを追加します。

これにより、以下のようにチャートが描画されます。

複数の系列を使用する

複数の系列を持つチャートを作成するには、異なるDataSeriesName値を持つDataPoint要素のListを生成する必要があります。DataSeriesNameを使用してチャートのそれぞれの要素が作成されます。

この例では、「Data Series One」と「Data Series Two」という名前の系列でリストを生成しました。

以下の図はチャートを生成するときに使用したデータです。

  • Was this article helpful?