【ほぼメモ】NVD3を使って棒グラフを書いてみた。

【ほぼメモ】NVD3を使って棒グラフを書いてみた。

D3.jsの拡張ライブラリ?にあたるnvd3を使って、簡単な棒グラフを作ってみました。

http://nvd3.org/

さっそくコードです。

書いたコード

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.5/d3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.5.16/nv.d3.js"></script>
<script type='text/javascript'>
window.onload=function(){
var testdata = [
    {
        x:704646000000,
        y:10
    },
    {
        x:707324400000,
        y:30
    },
    {
        x:709916400000,
        y:50
    },
    {
        x:712594800000,
        y:60
    },
    {
        x:715273200000,
        y:80
    },
    {
        x:717865200000,
        y:90
    },
    {
        x:720543600000,
        y:130
    },
    {
        x:723135600000,
        y:160
    },
    {
        x:725814000000,
        y:300
    },
    {
        x:728492400000,
        y:390
    },
    {
        x:730911600000,
        y:420
    },
    {
        x:733590000000,
        y:450
    },
    {
        x:736182000000,
        y:490
    }
];

var chartData = [
        {
          values: testdata,
          key: 'result',
          color: '#d03c3c'
        }
        // 複数のグラフを表示したければ、上と同じ感じでどんどん追記
      ];

nv.addGraph(function() {
    var chart = nv.models.multiBarChart()
      .transitionDuration(350)
      .reduceXTicks(false)   //If 'false', every single x-axis tick label will be rendered.
      .rotateLabels(-45)      //Angle to rotate x-axis labels.
      .showLegend(false)
      .showControls(false)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
      .groupSpacing(0.1)    //Distance between each group of bars.
    ;

    // x軸のタイトル設定＋フォーマット指定（数値指定）
    // chart.xAxis
    //     .tickFormat(d3.format(',f'));

    chart.xAxis.tickFormat(function(d) {
        return d3.time.format('%Y/%m')(new Date(d))
    });

     // y軸のタイトル設定＋フォーマット指定（数値指定）
    chart.yAxis
        .tickFormat(d3.format(',0f'));

    d3.select('#chart1 svg')
        .datum(chartData)
        .call(chart);
    nv.utils.windowResize(chart.update);
    d3.selectAll('.nvtooltip').remove();
    return chart;
});


}
</script>


<div id="chart1">
<!-- チャートを表示するための空の SVG -->
<svg></svg>
</div>

実行結果

まだまだ勉強中なので詳しいことは書けない。。。