積み上げ棒グラフを作成するライブラリ
以下のような積み上げ棒グラフを作成するJavaScriptライブラリです。
(Canvasの背景色と枠線は出力しません。この例ではCSSで背景色と枠線を指定しています)
次のようにライブラリを使用します。
  HTMLで以下のようにcanvasタグを記述
  <canvas id="cv1" width="600" height="400"></canvas>

  以下はJavaScriptでの記述
  // Canvasタグのidを指定してクラスインスタンス生成
  var testChart = new stackbar.Chart('cv1');

  // dataプロパティにデータ配列をセット
  // セットできるのは0以上の数値のみ
  // 全配列のlengthを一致させること
  testChart.data[0] = [100,300,225,123,500];
  testChart.data[1] = [150,400,343,235,200];
  testChart.data[2] = [130,380,587,77,120];
  testChart.data[3] = [180,200,293,159,150];
  testChart.data[4] = [90,60,123,230,250];
  testChart.data[5] = [200,490,512,60,212];
  testChart.data[6] = [120,250,432,243,61];

  // グラフに表示する見出しをセット(必須)
  // データ配列の数だけセットすること
  testChart.labels = ['2010/ 7', '2010/ 8', '2010/ 9', '2010/10',
       '2010/11 ','2010/12', '2011/ 1'];

  // グラフのタイトルをセット(セットしなくてもよい)
  testChart.title = 'グラフの縦棒表示';

  // データの説明文をセット(セットしなくてもよい)
  // データ配列のlengthの数だけセットすること
  testChart.dataexp = ['データその1', 'データその2', 'データその3',
      'データその4','データその5'];

  // 縦棒表示する場合のみ、VerticalBarにtrueをセットする。
  testChart.VerticalBar = true;

  // グラフを出力
  testChart.draw();
ライブラリ使用方法の詳細はReadmeを参照して下さい。
<ダウンロード>
右クリックなどでリンク先を保存してください。文字コードはUTF-8です。
stackbarchart.js (非圧縮 26KB)    stackbarchart.min.js (圧縮済 11KB)
<注意事項など>
Firefox3.6, IE8.0, Google Chrome9.0 で動作確認しています。
見出しとデータ値は、表示幅が狭い場合はグラフ中に表示されません。
(表示可能な表示幅かの判定結果は、ブラウザによって異なります)
excanvas.jsでは表示できません。IEではFlashCanvasで表示できることを確認済です。
このライブラリは、AwesomeChartJS を参考にして作りました。
このライブラリの使用・配布に制限はありませんが、著作権は放棄しません。
ライブラリの使用に関して作者は一切の責任を負いませんので、各自の責任において使用してください。
連絡先: mimami24imgmimg