NVD3 튜토리얼

1 개요[ | ]

NVD3

슬로건: "Re-usable charts for d3.js"
InteractiveGuideline 기능 제공

html

Copy

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.css">
<style>
#chart svg { width: 320px; height: 240px; }
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>

<div id="chart"><svg></svg></div>

<script>
nv.addGraph(function() {
  var chart = nv.models.lineChart()
    .useInteractiveGuideline(true)
    .showLegend(true)
    .showYAxis(true)
    .showXAxis(true)
    .width(320).height(240)
    .forceY([0,100])

  chart.xAxis.axisLabel('월')
  chart.yAxis.axisLabel('점수')
    
  d3.select('#chart svg')
    .datum(myData)
    .call(chart);

  nv.utils.windowResize(function() {
    chart.update()
  });
  return chart;
});

function myData() {
  return [{
    key: '영어',
    values: [{x:1,y:50},{x:2,y:60},{x:3,y:40}]
  }, {
    key: '수학',
    values: [{x:1,y:40},{x:2,y:70},{x:3,y:50}]
  }];
}
</script>

2 같이 보기[ | ]

d3.js

3 참고[ | ]

http://nvd3.org/