コンテンツへスキップ

チャートライブラリの使い方(2)「データを塗りつぶす」

by : 2017/04/19

前回のデモをベースに今回はデータに塗りつぶし処理を加えてみたいと思います。累積グラフなどを作る際に利用できるでしょう。

サンプルはこちらにあります。実行した際の画像は下記の通りです。

基本になるグラフは前回のものになります。今回はそれに加えた変更ポイントについて紹介します。

系列データの種類を変更

系列データを line から stacked_line に変更します。これでデータ範囲が塗りつぶされます。

fillColorプロパティを追加

fillColorに対して色設定(色名またはRGB)を指定します。これで塗りつぶす色が設定されます。

修正後は次のようになります。


// 系列定義
return {
name: 'series_1',
type: 'stacked_line', // lineから変更
data: data,
propNames: {
y: 'val'
},
fillColor: "#1E98B9", // 色を設定
color: 'blue'
};

view raw

index.html

hosted with ❤ by GitHub

これだけで塗りつぶされたグラフになります。


とても簡単な指定でグラフの種類を変更できます。ぜひサンプルで確認してください。

banner_02

From → hifive

%d人のブロガーが「いいね」をつけました。