Built with blockbuilder.org
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title></title>
<style>
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#chart {
width: 100%;
height: 100%;
max-width: 1200px;
max-height: 676px;
min-width: 600px;
min-height: 338px;
}
.bg {
fill:white;
}
.bar {
fill:skyblue;
}
.axisLayer .axis .domain {
stroke: #333333;
}
.axisLayer .tick line {
stroke: #333333;
stroke-width: 1px;
}
.axisLayer .tick text {
fill: #333333;
/*font-family: Oswald, sans-serif;*/
font-size: 14px;
letter-spacing: .05em;
}
.axisLayer .label {
font-size: 12px;
font-weight: normal;
letter-spacing: .05em;
}
.backgroundLayer .grid line {
stroke: #cccccc;
stroke-dasharray: 3,3;
}
.backgroundLayer .grid .domain {
stroke: none;
}
</style>
</head>
<body>
<button id="update">updarte</button>
<div id="chart"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
<script src="nChart.js"></script>
<script>
!(function(){
"use strict"
var data = generateData()
var BarChart = nChart.createVGroupBarChart()
.baseMargin({top:100, left:0, bottom:100, right:0})
.plotMargin({top:20, left:100, bottom:20, right:100})
.x(function(d){ return d["年"] })
.xIn(function(d){ return d["国名"] })
.y(function(d){ return d["値"] })
var Axis = nChart.createAxis()
.yAxisGridVisible(true)
var selector = d3.selectAll("#chart")
.datum(data)
.call(BarChart)
.call(Axis)
d3.select("#update").on("click", function(){
selector.update(generateData())
})
}())
function generateData(){
return Array.prototype.concat.apply([], ["日本", "アメリカ", "フランス"].map(function(country){
var array = [2001,2002,2003,2004].map(function(year){
var value = ~~(Math.random() * 100)
return {"国名":country, "年":year, "値":value}
})
return array
}))
}
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js