Help us understand the problem. What is going on with this article?

【グラフ描画ライブラリ】ccchartの使い方メモ

More than 5 years have passed since last update.

はじめに

Javascriptのグラフライブラリccchartの使い方をメモ。
ccchartは折れ線、棒、積み上げ、面、円、散布図等いろいろなチャートが手軽に描画できるライブラリです。
ここでは折れ線グラフの作り方をメモ。

読み込み

ccchart.jsをダウンロードし、適当な場所に配置してHTMLで読み込みます。
また、設定を記述するためのjsファイルも用意します(ここではmy.js)。

sample.html
<script type="text/javascript" language="javascript"  src="/sample/public/javascripts/ccchart.js"></script>
<script type="text/javascript" language="javascript"  src="/sample/public/javascripts/my.js"></script>

canvasタグを記述

HTMLにcanvasタグを記述します。

sample.html
<canvas id="chart_sample1"></canvas>
<canvas id="chart_sample2"></canvas>

共通プロパティ設定

ここからはjavaScriptを記述します。
ccchart.baseを使って、すべてのチャート共通の設定を行います。

my.js
  ccchart.base('', {config : {
    "type" : "line", //チャート種類
    "useVal" : "yes", //値を表示
    "xScaleFont" : "100 16px 'meiryo'", //水平軸目盛フォント
    "yScaleFont" : "100 16px 'meiryo'", //垂直軸目盛フォント
    "hanreiFont" : "bold 16px 'meiryo'", //凡例フォント
    "valFont" : "bold 16px 'meiryo'", //値フォント
    "paddingTop" : "25", //上パディング
    "paddingRight" : "140", //右パディング
    "colorSet" : ["blue"], //データ列の色
    "useShadow" : "no", //影
    "height" : "300", //チャート高さ
    "width" : "900", //チャート幅
    "useMarker" : "arc", //マーカー種類
    "markerWidth" : "7", //マーカー大きさ
    "valYOffset" : "8", //値オフセット
    "valXOffset" : "-8", //値オフセット
    "bg" : "#fff", //背景色
    "textColor" : "#333", //テキスト色
    "lineWidth" : "1", //ラインの太さ
  }});

個別プロパティ設定

チャートに個別のプロパティを設定します。

my.js
  var chart_sample1 = {
    "config" : {
      "colorSet" : ["red"], //データ列の色
      "minY" : 0, //Y軸最小値
      "maxY" : 100, //Y軸最大値
      "axisXLen" : 10, //水平目盛線の本数
      "roundDigit":0, // 軸目盛値の端数処理
    },
    "data" : [
                ["日付"],
                ["売上A"],
             ]
  };
  var chart_sample2 = {
    "config" : {
      "colorSet" : ["blue"], //データ列の色
      "minY" : 0, //Y軸最小値
      "maxY" : 50, //Y軸最大値
      "axisXLen" : 5, //水平目盛線の本数
      "roundDigit":0, // 軸目盛値の端数処理
    },
    "data" : [
                ["日付"],
                ["売上B"],
             ]
  };

データ設定

先ほど設定したハッシュにデータを追加します。

my.js
// チャート用データ設定  
var sales1 = {4:10, 5:30, 6:40, 7:30, 8:60, 9:50};
var i = 0;
for (key in sales1){
  i++;
  chart_sample1["data"][0][i] = key;
  chart_sample1["data"][1][i] = sales1[key];
}

// チャート用データ設定  
var sales2 = {2011:7000, 2012:7500, 2013:8000};
var i = 0;
for (key in sales2){
  i++;
  chart_sample2["data"][0][i] = key;
  chart_sample2["data"][1][i] = sales2[key];
}

チャート表示

ccchart.initでチャートを表示します。

my.js
// 第一引数:canvasのID、第二引数:設定とデータが入ったハッシュ
ccchart.init("chart_sample1", chart_sample1); 
ccchart.init("chart_sample2", chart_sample2);

出来上がり。

ccchart_sample.PNG

とりあえず表示できたら、公式サイトを見ながらいろいろ試してみましょう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした