特效描述：利用HTML5实现 数据曲线 走势图表代码。利用HTML5实现数据曲线走势图表代码
代码结构
1. 引入JS
2. HTML代码
var data = generateDayWiseTimeSeries(new Date("22 Apr ").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 10:00:00").getTime(),
max: new Date("14 Aug 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;
}
