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