折れ線グラフと棒グラフを組み合わせる

質問

折れ線グラフと棒グラフを組み合わせたグラフを作成するにはどのようにすればよいですか？

回答

OutSystemsではHighchartsを利用してチャートを作成します。カスタムJSONを作成して、ChartsのAdvancedFormat_Initアクションをカスタマイズします。

• HighchartsJSONプロパティでY軸を2つ定義します。
• DataSeriesFormatsプロパティを使用して、2つ目のY軸に関連する折れ線としてデータ系列を表示します。

以下の例では、DataPoint_Initを使用してColumnChartのデータを生成しています。各ポイントについて以下を定義します。

• X軸のラベル（例: "Jun-14"）
• 値（例: 180）
• データのデータ系列（例: "Birth Certificate"）

以下のJSONの例は、2つのY軸を定義しています。

• 1つ目のY軸（タイトルなし）
• 2つ目のY軸（タイトルなし、グラフの反対側に表示、パーセント表示による異なるラベル）

yAxis: [

  { // Primary yAxis
      title: { text:'' },
  },
  { // Secondary yAxis
       title:{ text:'' },
       labels:{ format:'{value} %' },
       opposite: true
  }
]

以下の例では、AdvandedDataSeriesFormatを初期化して、データ系列をカスタマイズしています。

• データ系列の名前を「% Self-service」と定義します。
• データ系列を折れ線として表示します。
• データ系列を2つ目のY軸に関連付けます。

その後、カスタマイズをリストにまとめる必要があります。

サンプルアクションAdvancedFormat_Initは高度なカスタマイズを設定します。

最後に、ColumnChartがAdvancedFormatを参照します。

追加情報

OutSystemsのグラフの基盤となるHighchartsで折れ線と棒グラフを組み合わせた例。