Skip to content

Instantly share code, notes, and snippets.

@bathtimefish

bathtimefish/_setup.md

Last active December 9, 2015 07:03
Show Gist options
  • Save bathtimefish/5c436c63c5efcb492674 to your computer and use it in GitHub Desktop.
Save bathtimefish/5c436c63c5efcb492674 to your computer and use it in GitHub Desktop.
Download ZIP
NVD3のサンプル
Raw
_setup.md 
bower install --save nvd3
Raw
index.html
<!DOCTYPE html>
<html>
<body>
<div class="container" style="margin-top:100px">
<div class="graph-border" id="main-chart">
<svg width="500" height="500"></svg>
</div>
</div>
</body>
</html>
Raw
main.js
var data = [
{x: "01", y: 10},
{x: "02", y: 159},
{x: "03", y: 18},
{x: "04", y: 234},
{x: "05", y: 25},
{x: "06", y: 27},
{x: "07", y: 130},
{x: "08", y: 300},
{x: "09", y: 228},
{x: "10", y: 123},
{x: "11", y: 180},
{x: "12", y: 62},
];
var grapObj = [
{
key: 'みかん',
color: '#ff7f0e',
values: data
}
];
nv.addGraph(function() {
var chart = nv.models.lineChart()
//var chart = nv.models.discreteBarChart()
chart.xAxis
.axisLabel('日付');
chart.yAxis
.axisLabel('出荷数');
chart.yDomain([0, 300]);
d3.select('#main-chart svg')
.datum(grapObj)
.call(chart);
nv.utils.windowResize(chart.update);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment