Javascriptでグラフ作成する「WebFX」補足説明

javascriptでグラフを作成する「WebFX」では積み上げグラフしか紹介しませんでした。
今回は補足として、棒グラフ、線グラフ、混合グラフを取り上げます。
webfx2

使用方法
基本的な使い方はjavascriptでグラフを作成する「WebFX」を参照下さい。
以下はscriptの解説です。
棒グラフ
var c = new Chart(document.getElementById('id名'));
c.setDefaultType(CHART_BAR);
c.setGridDensity(8, 7); //グリッド(横、縦)
c.setVerticalRange(0, 80); //縦軸の数値(最小、最大)
c.setBarWidth(12); //棒グラフの幅サイズ
c.setBarDistance(-2); //棒グラフの重なり
c.setHorizontalLabels(['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun', 'mon', 'tue']); //横軸の項目
c.add('-19', '#4040FF', [ 5, 10, 20, 10, 40, 52, 68, 70, 70]); //第一項目(ラベル、棒グラフの色、数値)
c.add('20-29', '#8080FF', [ 8, 7, 12, 20, 24, 16, 36, 28, 28]); //第二項目(ラベル、棒グラフの色、数値)
c.add('30-', '#FF8080', [ 3, 12, 5, 18, 20, 13, 28, 36, 18]); //第三項目(ラベル、棒グラフの色、数値)
c.draw();

線グラフ
var c = new Chart(document.getElementById('id名'));
c.setDefaultType(CHART_LINE);
c.setGridDensity(10, 10); //グリッド(横、縦)
c.setVerticalRange(0, 80); //縦軸の数値(最小、最大)
c.setHorizontalLabels(['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun', 'mon', 'tue', 'wed']); //横軸の項目
c.add('-19', '#4040FF', [ 5, 10, 20, 10, 40, 52, 68, 70, 70, 60]); //第一項目(ラベル、棒グラフの色、数値)
c.add('20-29', '#8080FF', [ 8, 7, 12, 20, 24, 16, 36, 28, 28, 45]); //第二項目(ラベル、棒グラフの色、数値)
c.add('30-39', '#FF8080', [ 3, 12, 5, 18, 20, 13, 28, 36, 18, 5]); //第三項目(ラベル、棒グラフの色、数値)
c.add('40-', '#FF00FF', [ 1, 20, 3, 2, 1, 4, 10, 12, 8, 10]); //第四項目(ラベル、棒グラフの色、数値)
c.draw();

混合グラフ
var c = new Chart(document.getElementById('id名'));
c.setDefaultType(CHART_AREA | CHART_STACKED);
c.setGridDensity(10, 10); //グリッド(横、縦)
c.setVerticalRange(-100, 300); //縦軸の数値(最小、最大)
c.setHorizontalLabels(['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun', 'mon', 'tue', 'wed']); //横軸の項目
c.setBarWidth(10); //棒グラフの幅サイズ
c.add('Spam', '#4040FF', [ 5, 10, 20, 10, 40, 52, 68, 70, 70, 60]); //第一項目(ラベル、棒グラフの色、数値)
c.add('Innocent', '#8080FF', [ 8, 7, 12, 20, 24, 16, 36, 28, 28, 45]); //第二項目(ラベル、棒グラフの色、数値)
c.add('Missed Spam', '#A5A5FF', [ 8, 7, 12, 20, 24, 16, 36, 36, 18, 5]); //第三項目(ラベル、棒グラフの色、数値)
c.add('False Positives', '#DEDEFF', [ 1, -20, 3, 2, 1, 4, -80, 12, 8, -10]); //第四項目(ラベル、棒グラフの色、数値)
c.add('SMTP Rejects', 'red', [45, 54, 65, 150, 280, 120, 86, 65, 74, 12], CHART_LINE); //第五項目(ラベル、棒グラフの色、数値、線グラフ)
c.add('System Load', '#008800', [-8, -7, -12, -20, -24, -16, -36, -36, -18], CHART_BAR); //第六項目(ラベル、棒グラフの色、数値、棒グラフ)
c.add('Memory Usage', '#001200', [-1, -20, -3, -2, -1, -4, -80, -12, -8], CHART_BAR); //第七項目(ラベル、棒グラフの色、数値、棒グラフ)
c.draw();

結果はJavascriptでグラフ作成する「WebFX」補足説明サンプル

sponsors

「Javascriptでグラフ作成する「WebFX」補足説明」をシェアする

記事作成:
記事URL:

TOP > > > Javascriptでグラフ作成する「WebFX」補足説明