mosakabe @ ウィキ

chart

最終更新：2012年07月21日 22:10

mosakabe

- view

管理者のみ編集可

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>チャートサンプル</title>
<link rel="stylesheet" type="text/css" href="css/html5reset.css"  />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://jsgt.org/c/js/ccchart.js" charset="utf-8"></script>
<script type="text/javascript">
  $(function (){
    ccchart.init('hoge', {
      "config": {
        "subTitle": "Canvasを使ったシンプルなラインチャートです",
        "type": "bezi2",
        "roundedUpMaxY": 1000,
        "paddingRight": 220,
        "width": $(document).width(),
        "height": $(document).height()-100,
        "textColor": "#888888",
        "xColor": "#AAAAAA",
        "yColor": "#AAAAAA",
        "xScaleSkip": 5,
        "minY": 0,
        "hanreiMarkerStyle": "rect",
        "valYOffset":6,
        "borderWidth": 4,
        "markerWidth": 3,
        "lineWidth": 3,
        "bg": "#FFFFFF",
      },
      "data": [
          ["年度",2007,2008,2009,2010,2011,2012,2013],
          ["紅茶",435,332,524,688,774,825,999],
          ["コーヒー",600,335,584,333,457,788,900],
          ["ジュース",60,435,456,352,567,678,1260],
          ["ウーロン",200,123,312,200,402,300,512]
      ]
    });
  });
</script>
</head>
<body>
<canvas id="hoge"></canvas>
</body>
</html>

「chart」をウィキ内検索