<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5数据曲线走势图表代码 - A5源码 </title>
<style>
body {
background: #000524;
}
#wrapper {
padding-top: 20px;
background: #000524;
border: 1px solid #000;
box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.71);
max-width: 650px;
margin: 35px auto;
}
#chart-bar {
position: relative;
margin-top: -38px;
}
</style>
</head>
<body>
<script src="js/apexcharts.js"></script>
<div id="wrapper">
<div id="chart-area">
</div>
<div id="chart-bar">
</div>
</div>
<script>
var data = generateDayWiseTimeSeries(new Date("22 Apr 2017").getTime(), 115, {
min: 30,
max: 90
});
var options1 = {
chart: {
id: "chart2",
type: "area",
height: 230,
foreColor: "#ccc",
toolbar: {
autoSelected: "pan",
show: false
}
},
colors: ["#00BAEC"],
stroke: {
width: 3
},
grid: {
borderColor: "#555",
yaxis: {
lines: {
show: false
}
}
},
dataLabels: {
enabled: false
},
fill: {
gradient: {
enabled: true,
opacityFrom: 0.55,
opacityTo: 0
}
},
markers: {
size: 5,
colors: ["#000524"],
strokeColor: "#00BAEC",
strokeWidth: 3
},
series: [
{
data: data
}
],
tooltip: {
theme: "dark"
},
xaxis: {
type: "datetime"
},
yaxis: {
min: 0,
tickAmount: 4
}
};
var chart1 = new ApexCharts(document.querySelector("#chart-area"), options1);
chart1.render();
var options2 = {
chart: {
id: "chart1",
height: 130,
type: "bar",
foreColor: "#ccc",
brush: {
target: "chart2",
enabled: true
},
selection: {
fill: {
color: "#fff",
opacity: 0.4
},
xaxis: {
min: new Date("27 Jul 2017 10:00:00").getTime(),
max: new Date("14 Aug 2017 10:00:00").getTime()
}
}
},
colors: ["#FF0080"],
series: [
{
data: data
}
],
stroke: {
width: 2
},
grid: {
borderColor: "#444"
},
markers: {
size: 0
},
xaxis: {
type: "datetime",
tooltip: {
enabled: false
}
},
yaxis: {
tickAmount: 2
}
};
var chart2 = new ApexCharts(document.querySelector("#chart-bar"), options2);
chart2.render();
function generateDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = baseval;
var y =
Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push([x, y]);
baseval += 86400000;
i++;
}
return series;
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://down.admin5.com/" target="_blank">A5源码 </a></p>
</div>
</body>
</html>
