チャートライブラリの使い方(2)「データを塗りつぶす」
前回のデモをベースに今回はデータに塗りつぶし処理を加えてみたいと思います。累積グラフなどを作る際に利用できるでしょう。
サンプルはこちらにあります。実行した際の画像は下記の通りです。
基本になるグラフは前回のものになります。今回はそれに加えた変更ポイントについて紹介します。
系列データの種類を変更
系列データを line から stacked_line に変更します。これでデータ範囲が塗りつぶされます。
fillColorプロパティを追加
fillColorに対して色設定(色名またはRGB)を指定します。これで塗りつぶす色が設定されます。
修正後は次のようになります。
// 系列定義 | |
return { | |
name: 'series_1', | |
type: 'stacked_line', // lineから変更 | |
data: data, | |
propNames: { | |
y: 'val' | |
}, | |
fillColor: "#1E98B9", // 色を設定 | |
color: 'blue' | |
}; |
これだけで塗りつぶされたグラフになります。
とても簡単な指定でグラフの種類を変更できます。ぜひサンプルで確認してください。
Trackbacks & Pingbacks
コメントは受け付けていません。