|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="../css/c3.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="chart"></div>
|
|
|
|
|
|
|
|
|
|
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
|
|
|
|
|
<script src="../js/c3.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
var chart = c3.generate({
|
|
|
|
|
data: {
|
|
|
|
|
x: 'date',
|
|
|
|
|
columns: [
|
|
|
|
|
['date', '2014-01-01', '2014-01-10', '2014-01-20', '2014-01-30', '2014-02-01'],
|
|
|
|
|
['sample', 30, 200, 100, 400, 150, 250]
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
axis: {
|
|
|
|
|
x: {
|
|
|
|
|
type: 'timeseries',
|
|
|
|
|
tick: {
|
|
|
|
|
format: '%Y%m%d %H:%M:%S'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
regions: [
|
|
|
|
|
{start: '2014-01-05', end: '2014-01-10'},
|
|
|
|
|
// {start: new Date('2014-01-10'), end: new Date('2014-01-15')},
|
|
|
|
|
{start: 1390608000000, end: 1391040000000}
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
chart.load({
|
|
|
|
|
columns: [
|
|
|
|
|
['date', +new Date('2014-01-01'), +new Date('2014-01-10'), +new Date('2014-03-01')],
|
|
|
|
|
['sample', 100, 200, 300]
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
chart.regions([
|
|
|
|
|
{start: +new Date('2014-01-10'), end: +new Date('2014-01-15')}
|
|
|
|
|
]);
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
