Protovis のテスト

README

Protovis のテスト
積み上げ棒グラフと折れ線グラフ

http://mbostock.github.io/protovis/

jsdoit.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
  font: 30px sans-serif;
}

div#graph {
    width: 1024px;
    margin-top : 20px;
    margin-left : auto;
    margin-right : auto;
    background : white;
}

jsdoit.html

<script type="text/javascript" src="http://jsrun.it/assets/c/W/o/5/cWo5s"></script>
<div id="graph">
    <script>
        //日付のデータ
        var dateData = ["9/12","9/13","9/14","9/15","9/16"]
        
        //棒グラフのデータ
        var data = [
            [0,1,2,2,1],
            [1,1,1,2,2]
        ];
        
        //線グラフのデータ
        var lineData = [7,9,9,10,6]
        
        //パネルの定義
        var vis = new pv.Panel()        
                        .width(950)        
                        .height(420)
                        .margin(30);
        
        //左の軸
        vis.add(pv.Rule)
            .data(pv.range(0, 6))
            .font("bold 15pt メイリオ")
            .bottom(function(d){ return d * 80 + .5})
            .strokeStyle("rgba(50,50,50,.3)")
            .add(pv.Label)
            .left(0);
        
        //右の軸
        vis.add(pv.Rule)
            .data(pv.range(0, 11, 1))
            .font("bold 15pt メイリオ")
            .bottom(function(d){ return d * 40 + .5})
            .strokeStyle("rgba(50,50,50,.3)")
            .add(pv.Label)
            .right(20);
        
        //左のラベル
        vis.add(pv.Label)
            .font("bold 20pt メイリオ")
            .textStyle(pv.color("#696969"))
            .left(-30)
            .textAlign("center")
            .textAngle(Math.PI / 2)
            .text("左辺値");
        
        //右のラベル
        vis.add(pv.Label)
            .font("bold 20pt メイリオ")
            .textStyle(pv.color("#696969"))
            .right(0)
            .textAlign("center")
            .textAngle(Math.PI / 2)
            .text("右辺値");
        
        //下のラベル
        vis.add(pv.Label)
            .data(dateData)
            .font("bold 10pt メイリオ")
            .textStyle(pv.color("#696969"))
            .textAlign("center")
            .left(function(){ return this.index * 200 + 60})
            .bottom(-25);
        
        //積み上げ棒グラフ
        vis.add(pv.Layout.Stack)
            .layers(data)
            .x(function(){ return 50 * this.index})
            .y(function(d){ return d * 80})
            .layer.add(pv.Bar).width(80)
            .height(function(d){ return d * 80; })
            .left(function(){ return this.index * 200 + 20; });
        
        //線グラフ
        vis.add(pv.Line)
            .data(lineData)
            .bottom(function(d){ return d * 40})
            .left(function(){ return this.index * 200 + 60})
            .lineWidth(3)
            .strokeStyle(pv.color("red"))
            .add(pv.Dot)
            .fillStyle(pv.color("red"));
                
        //レンダリング
        vis.render();
       
    </script>
</div>

jsdoit.js

function createGraph(vis,pv){
             
}