<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>highstock时间格式的数据生成highcharts图表</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
font-size: 15px;
overflow: auto;
}
section {
width: 95%;
height: 100%;
margin: 0 auto;
}
section>div {
width: 100%;
margin-top: 10px;
border: 1px solid black;
}
section>div:hover {
box-shadow: 2px 2px 15px 0px #aaa;
}
</style>
</head>
<body>
<section>
</section>
</body>
<script src="https://img.highcharts.com.cn/highstock/highstock.js"></script>
<script src="https://img.highcharts.com.cn/highcharts/highcharts.js" type="text/javascript" charset="utf-8"></script>
<script src="https://img.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://img.highcharts.com.cn/highcharts/modules/no-data-to-display.js"></script>
<script src="https://img.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js" type="text/javascript" charset="utf-8"></script>
<script>
function pushdArray(arr, index, value) { //arr 被插二维数组 index二维数组索引 value插入值
if(index >= arr.length) {
return;
}
arr[index].push(value);
return arr;
}
function arrs(arr) { //获取空的二维数组
var tArr = [];
for(var i in arr) {
tArr.push([])
}
return tArr;
}
//1、将中国标准时间格式化为（2017-06-06）
function formatDateTime(theDate) {
var _hour = theDate.getHours();
var _minute = theDate.getMinutes();
var _second = theDate.getSeconds();
var _year = theDate.getFullYear()
var _month = theDate.getMonth();
var _date = theDate.getDate();
_month = _month + 1;
if(_month < 10) {
_month = "0" + _month;
}
if(_date < 10) {
_date = "0" + _date
}
return _year + "-" + _month + "-" + _date;
}
var groupingUnits = [
[
'day', [1, 2, 3, 4, 6]
],
[
'week', // unit name
[1, 2, 3, 4, 6] // allowed multiples
],
[
'month', [1, 2, 3, 4, 6]
],
[
'hour', [1, 2, 3, 4, 6]
],
[
'minute', [1, 2, 3, 4, 6]
]
];
// create the chart
Highcharts.setOptions({
global: {
useUTC: false
//世界时间
},
lang: {
rangeSelectorZoom: '范围:',
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月",
"九月", "十月", "十一月", "十二月"
],
shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月',
'九月', '十月', '十一月', '十二月'
],
weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
printChart: '打印图表',
downloadPNG: '下载JPEG 图片',
downloadJPEG: '下载JPEG文档',
downloadPDF: '下载PDF 图片',
downloadSVG: '下载SVG 矢量图',
contextButtonTitle: '下载图片'
}
});
//得到series数组
function getSeries1(datas, seriesName) {
var series = []
for(var i in seriesName) {
var visible = true;
var showInLegend = true;
if(Math.max.apply(null, datas[i]) === 0) {
visible = false; //某些图例是否显示灰色
//showInLegend = false;//是否显示某些图例
}
series.push({
type: 'column',
name: seriesName[i],
data: datas[i],
visible: visible,
showInLegend: showInLegend,
});
}
return series;
}
//数据交互
getChart();
function getChart() {
//假数据
var a = [
[{
name: '品质异常1'
},
{
exceptionName: ['异常1', '异常2', '异常3', '异常4']
},
{
arr: [
[1551283200000, 7.204, 7.232, 7.037, 7.072],
[1551542400000, 7.058, 7.127, 6.953, 6.988],
[1551715200000, 7.068, 7.137, 6.943, 6.962],
[1551974400000, 7.078, 7.147, 6.923, 6.961]
]
}
],
[{
name: '品质异常2'
},
{
exceptionName: ['异常1', '异常2', '异常3', '异常4']
},
{
arr: [
[1551283100000, 7.204, 7.232, 7.037, 0],
[1551283200000, 7.204, 7.232, 7.037, 0],
[1551456000000, 7.058, 7.107, 6.933, 0],
[1551715200000, 6.961, 7.003, 6.92, 6.982],
[1551888000000, 6.947, 7.024, 0, 6.982],
[1551974400000, 0, 7.141, 6.891, 7.1],
[1552147200000, 6.968, 7.204, 6.905, 7.086]
]
}
],
[{
name: '品质异常3'
},
{
exceptionName: ['异常1', '异常2', '异常3', '异常4']
},
{
arr: [
]
}
]
];
var tArr1 = []; //x轴数据
var tArr2 = []; //y轴数据
for(var i = 0; i < a.length; i++) {
var str = '<div id="container' + i + '" style="height: 350px;"></div>';
$('section').append(str);
var title = a[i][0].name;
var seriesName = a[i][1].exceptionName;
tArr1 = arrs(seriesName);
tArr2 = arrs(seriesName);
var arr = a[i][2].arr
for(var j = 0; j < arr.length; j++) {
for(var k = 0; k < seriesName.length; k++) {
var datas1 = pushdArray(tArr1, k, Number(arr[j][0]));
var datas2 = pushdArray(tArr2, k, Number(arr[j][k + 1]));
}
}
//console.log(title,tArr1[0],tArr2,getSeries1(tArr2,seriesName),'----------------')
var xDataList = tArr1 //x轴数组
var chart = Highcharts.chart('container' + i, {
chart: {
panning: true,
zoomType: 'xy',
marginLeft: 100,
marginTop: 100,
spacing: [10, 40, 10, 40]
},
title: {
text: title,
x: -20
},
subtitle: {
x: -20
},
scrollbar: { //滚动条
enabled: true
},
xAxis: {
title: {
text: '时间',
align: 'low', //和x轴最小的值对齐
x: -60
},
categories: xDataList[i],
labels: { //格式化x轴显示
formatter: function() {
return formatDateTime(new Date(this.value)).split(' ')[0];
}
}
},
yAxis: [{
labels: {
align: 'right',
},
title: {
text: '异常个数: pcs'
},
offset: 0,
lineWidth: 2,
opposite: false,
scrollbar: { //y轴滚动条
enabled: true
}
}],
tooltip: {
//valueSuffix: '°C',//后缀
split: true,
height: 10,
shared: true,
shape: 'callout',
xDateFormat: '%Y-%m-%d',
headerFormat: '<span style="color:{series.color}">\u25CF</span><small>{point.key:%Y-%m-%d}</small><table>',
pointFormat: '<span style="color:{series.color}">\u25CF</span><tr><td style="color: {series.color}"><b>{series.name}: </b></td>' +
'<td style="text-align: right"><b>{point.y}</td></tr>',
footerFormat: '</table>',
dateTimeLabelFormats: {
minute: '%Y-%m-%d %H:%M'
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
borderWidth: 1,
shadow: false
},
plotOptions: {
series: {
showInLegend: true,
events: {
legendItemClick: function(event) {
console.log("点击了：" + this.name)
}
}
},
column: {
stacking: 'normal',
dataLabels: {
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) ||
'white',
style: {
textShadow: '0 0 3px black'
}
},
pointWidth: 30,
}
},
series: getSeries1(tArr2, seriesName)
});
}
}
</script>
</html>
809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
