4. グラフのスタイル
グラフのスタイルは、plotやseriesのプロパティで指定します。
plotのtensionプロパティは線のカーブを指定します。デフォルトでは、各点を直線で結びますが、'S'を指定すると2次のベジエ曲線、'X'を指定すると3次のベジエ曲線を用いて各点を結びます。'x'は'X'に似ているのですが、より全体が閉曲線に近くなるように描画します。また数値を指定した場合はシンプルなベジエ曲線が用いられ、値が大きいほど曲率が大きくなります。
seriesのstrokeプロパティで、グラフの線の色や幅を、fillプロパティで、棒グラフや面グラフの塗りつぶしの色を指定することができます。
var myChart = new dojox.charting.Chart2D("myChart");
// tension の指定
myChart.addPlot("default", {type: "Lines", tension: 3});
// 色と線の太さを指定
myChart.addSeries("2008年度売上高", revenues2008, {stroke: {color: "red", width: 3}});
myChart.addSeries("2009年度売上高", revenues2009, {stroke: {color: "blue", width: 3}});
myChart.addAxis("x", {majorTickStep: 1, natural: true, labels: labels});
myChart.addAxis("y", {vertical: true, fixUpper: "major", includeZero: true});
myChart.render();
実行結果:
また、個々のseriesにスタイルを指定する代わりに、あらかじめ用意されているthemeオブジェクトをChart2Dに設定することで、グラフの色調を指定することもできます。Dojoはいくつかのthemeを提供しており、それらはDojo ToolkitのWebページで確認することができます。
ここではThreeDというthemeを使ってみます。使用するthemeはdojo.require()で読み込んでおく必要があります。
dojo.require("dojox.charting.themes.ThreeD");
チャートを描画する部分を以下のように変更します。
var myChart = new dojox.charting.Chart2D("myChart");
myChart.addPlot("default", {type: "Lines", tension: 3});
myChart.addSeries("2008年度売上高", revenues2008);
myChart.addSeries("2009年度売上高", revenues2009);
myChart.addAxis("x", {majorTickStep: 1, natural: true, labels: labels});
myChart.addAxis("y", {vertical: true, fixUpper: "major", includeZero: true});
// テーマの設定
myChart.setTheme(dojox.charting.themes.ThreeD);
myChart.render();
実行結果:
この例では、すでに用意されたthemeを使いましたが、themeは自分で定義することもできます。自分で定義することで、スタイルの細かな部分までカスタマイズができるようになります。先ほどのコードの一部を以下のように書き換えてみましょう。
var theme = new dojox.charting.Theme({
chart:{ // グラフの背景と枠線
stroke: null, // 枠線
fill: "#252525" // 背景
},
plotarea:{ // グラフ描画エリアの背景と枠線
stroke: {width: 5, color:"#fff"}, // 枠線
fill: "#252525" // 背景
},
axis:{ // 軸と目盛り
stroke: {width: 1, color: "#aaa"}, // 軸
tick: { // 目盛り全体
color: "#777", // 色
position: "center", // 位置
font: "normal normal normal 7pt Tahoma", // ラベル
fontColor: "#777"
},
majorTick: {width: 1, length: 6}, // 主目盛り（major ticks）
minorTick: {width: 0.8, length: 3}, // 副目盛り（minor ticks）
microTick: {width: 0.5, length: 1} // 補助目盛り（micro ticks）
},
series: { // 系列のスタイル
stroke: {width: 2, color: "#ccc"}, // 面積を持たない系列
outline: {width: 1, color: "#ccc"}, // 外枠
shadow: null, // 影
fill: "#ccc", // 面積を持つ系列
font: "normal normal normal 8pt Tahoma",
fontColor: "#000" },
marker: { // マーカーのスタイル
symbol: "m-3,3 l3,-6 3,6 z", // マーカーの形
stroke: {width: 1.5, color: "#ccc"}, // 面積を持たないマーカー
outline: {width: 0.1, color: "#ccc"}, // 外枠
shadow: null, // 影
fill: "#ccc", // 面積を持つマーカー
font: "normal normal normal 8pt Tahoma",
fontColor: "#000"
},
// 各系列に用いられる色
// 系列を追加するたびに以下で定義した色が順次適用されます
// 系列の数が定義した色の数を超えた場合は、最初に戻って順に適用されます
colors: ["#06f","#f06","#6f0","#90f","#f90","#0f9"]
});
myChart.setTheme(theme);
実行結果:
