问题
I am new to d3 charts and i want to create d3 Cumulative Line Chart with date on x-axis,some values on y-axis and x & y axis's values should appear on tooltip. Here below is my sample code and sharing a screen shot for better understand my requirements:
[index.html file]
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
/*body { font: 12px Arial;}
path { `enter code here`
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}*/
</style>
<body>
<input type='button' onclick="Graph()" value='Generate Chart'>
<div id='chart' style="height:300px"><svg></svg>
</div>
</body>
<link href="https://cdn.healthscion.com/Zureka/scripts/nv.d3.min.css" rel="stylesheet" />
<script src="https://cdn.healthscion.com/Zureka/scripts/d3.min.js"></script>
<script src="https://cdn.healthscion.com/Zureka/scripts/nv.d3.min.js"></script>
<script type="text/javascript">
var values = [
[Date.parse("02/09/2016 12:46:45"), 150],
[Date.parse("02/08/2016 12:46:45"), 50],
[Date.parse("02/07/2016 12:46:45"), 130],
[Date.parse("02/06/2016 12:46:45"), 100],
[Date.parse("02/05/2016 12:46:45"), 80],
[Date.parse("02/04/2016 12:46:45"), 50],
[Date.parse("02/03/2016 12:46:45"), 120],
[Date.parse("02/02/2016 12:46:45"), 90],
[Date.parse("02/01/2016 12:46:45"), 110]
];
var valuesfirst = [];
var numericchartdata = [];
valuesfirst.push(values);
numericchartdata.push({
'key': "Series 1", 'values': valuesfirst[0]
});
function Graph() {
nv.addGraph(function () {
var chart = nv.models.cumulativeLineChart()
.x(function (d) {
return d[0]
})
.y(function (d) {
return (d[1] * 100);
}) //adjusting, 100% is 1.00, not 100 as it is in the data
//.color(d3.scale.category10().range())
//.useInteractiveGuideline(false)
;
//tickValues([1078030800000, 1122782400000, 1167541200000, 1251691200000])
chart.xAxis.tickFormat(function (d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis.tickFormat(d3.format(',.1%'));
d3.select("#chart" + ' svg').datum(numericchartdata).call(chart);
//TODO: Figure out a good way to do this automatically
nv.utils.windowResize(chart.update);
return chart;
});
}
</script>
回答1:
I hope it would work.
<!DOCTYPE html>
<html>
<head>
<link data-require="nvd3@1.1.14-beta" data-semver="1.1.14-beta" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/nv.d3.css" />
<script data-require="d3@3.3.11" data-semver="3.3.11" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script>
<script data-require="nvd3@1.1.14-beta" data-semver="1.1.14-beta" src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/nv.d3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<style>
.nv-point {
stroke-opacity: 1 !important;
stroke-width: 10px;
fill-opacity: 1 !important;
}
.bullet { font: 10px sans-serif; }
.bullet .marker { stroke: #000; stroke-width: 2px; }
.bullet .tick line { stroke: #666; stroke-width: .5px; }
.bullet .range.s0 { fill: #eee; }
.bullet .range.s1 { fill: #ddd; }
.bullet .range.s2 { fill: #ccc; }
.bullet .measure.s0 { fill: steelblue; }
.bullet .title { font-size: 14px; font-weight: bold; }
.bullet .subtitle { fill: #999; }
</style>
<body> <div id="chart" style="height:500px">
<svg height="600" width="600"></svg> </div>
<script>
var data1 = [
{
"key": "Blood Sugar Random",
"values": [
[1399787880000, 4900],
[1418291820000, 5400],
[1427251500000, 5200],
[1447046040000, 4900],
[1447669500000, 35300],
[1448085600000, 6400],
[1448504100000, 2800],
[1450418400000, 5800],
[1452229200000, 4800],
[1454559095000, 5000],
[1468195946000, 5400],
[1481531373000, 5100]] }];
nv.addGraph(function () {
var chart = nv.models.lineChart().interpolate('cardinal')
.x(function (d) {
return d[0];
})
.y(function (d) {
return d[1]
})
.color(d3.scale.category10().range())
.transitionDuration(300)
.showLegend(true)
.showYAxis(true)
.forceY([50, 500])
.tooltipContent(
function (key, x, y, e) {
return '<div id="tooltipcustom">' + '<p id="head">' + key + '</p>'
+ '<p>' + y + ' at ' + new Date(e.point[0]).getDate().toString() + '-' + (new Date(e.point[0]).getMonth() + 1).toString() +
'-' + new Date(e.point[0]).getFullYear().toString() + ' ' + new Date(e.point[0]).getHours().toString() + ':' + new Date(e.point[0]).getMinutes().toString() +
':' + (new Date(e.point[0]).getSeconds().toString() == '0' ? '00' : new Date(e.point[0]).getSeconds().toString()) + '</p></div>'
});
chart.xAxis
.tickValues([1078030800000, 1122782400000, 1167541200000, 1251691200000])
.tickFormat(function (d) {
return d3.time.format("%d-%Y %H:%M:%S")(new Date(d))
});
chart.yAxis
.tickFormat(function (d) {
return d3.format('.2f')(d)
});
d3.select('#chart svg')
.datum(data1)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
}, function (chart) {
x = chart;
var x1 = chart.xScale()(1122782400000);
var x2 = chart.xScale()(1251691200000);
var height = chart.yAxis.range()[0];
var y2 = chart.yScale()(80);
var y1 = chart.yScale()(120);
var width = chart.xAxis.range()[1];
d3.select('.nv-wrap')
.append('rect')
.attr('y', y1)
.attr('height', y2 - y1)
.style('fill', '#2b8811')
.style('opacity', 0.2)
.attr('x', 0)
.attr('width', width);
});
来源：https://stackoverflow.com/questions/40239174/d3-cumulative-line-chart