1.当highstock图表是默认很多个的时候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://img.highcharts.com.cn/highstock/highstock.js"></script>
<script src="https://img.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.highcharts.com.cn/highcharts/modules/no-data-to-display.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
font-size: 15px;
overflow: auto;
background: gray;
}
section{
width: 95%;
height: 100%;
margin: 0 auto;
}
section>div{
width: 100%;
margin-top: 10px;
}
section>div:hover {
box-shadow: 2px 2px 15px 0px #aaa;
}
</style>
</head>
<body>
<section></section>
</body>
<script>
//得到series数组
function getSeries(datas,seriesName) {
var series = []
for(var i in seriesName) {
series.push({
type : 'column',
name : seriesName[i],
data : datas[i],
yAxis : 1,
dataGrouping : {
units : groupingUnits
}
})
}
return series;
}
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;
}
var groupingUnits = [[
'day', [1]
],[
'week', // unit name
[1] // allowed multiples
], [
'month',
[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 : '下载图片'
}
});
//假数据
var a =
[{
name: '品质异常1',
exceptionName: ['异常1','异常2','异常3','异常4'],
arr: [[1416182400000,7.204,7.232,7.037,7.072],
[1416268800000,7.058,7.107,6.933,6.968],
[1416355200000,6.961,7.003,6.92,6.982],
[1416441600000,6.947,7.024,6.891,6.982],
[1416528000000,6.975,7.141,6.891,7.1],
[1416787200000,6.968,7.204,6.905,7.086],
[1416873600000,7.065,7.253,7.024,7.225],
[1416960000000,7.232,7.495,7.183,7.385],
[1417046400000,7.482,7.593,7.322,7.454]
]
},
{
name: '品质异常2',
exceptionName: ['异常1','异常2','异常3','异常4'],
arr: [[1416182400000,7.204,7.232,7.037,7.072],
[1416268800000,7.058,7.107,6.933,6.968],
[1416355200000,6.961,7.003,6.92,6.982],
[1416441600000,6.947,7.024,6.891,6.982],
[1416528000000,6.975,7.141,6.891,7.1],
[1416787200000,6.968,7.204,6.905,7.086],
[1416873600000,7.065,7.253,7.024,7.225],
[1416960000000,7.232,7.495,7.183,7.385],
[1417046400000,7.483,7.593,7.322,7.454]
]
},
{
name: '品质异常3',
exceptionName: ['异常1','异常2','异常3','异常4'],
arr: []
}]
var datas = []
var tArr = [];
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].name;
var seriesName = a[i].exceptionName;
tArr = arrs(seriesName);
for(var j=0;j<a[i].arr.length;j++) {
for(var k=0; k<seriesName.length;k++) {
datas = pushdArray(tArr, k, [a[i].arr[j][0],
a[i].arr[j][k+1]]);
}
}
//console.log(datas,'----------------')
var chart = Highcharts.stockChart('container'+i, {
chart : {
type : 'column'
},
rangeSelector : {
inputDateFormat : '%Y-%m-%d',
inputEditDateFormat : '%Y-%m-%d',
enabled : true,
selected : 0,//表示以上定义button的index,从0开始
buttons : [
{
type : 'day',
count: 7,
text : '日',
dataGrouping: {
forced: true,
units: [groupingUnits[0]]
}
},
{
type : 'month',
count: 1,
text : '月',
dataGrouping: {
forced: true,
units: [groupingUnits[2]]
}
},
{
type : 'all',
text : '周',
dataGrouping: {
forced: true,
units: [groupingUnits[1]]
}
}]
},
title : {
text : title
},
credits: {//banquan
enable: false,
href: '',
position: {
},
style: {
},
text: ''
},
legend: {//图例
enabled : true,//是否显示图例
align : 'top'
},
scrollbar : {//滚动条
height : 10,
minWidth : 50,
},
xAxis : {
min: 0,
dateTimeLabelFormats : {
second : '%H:%M:%S',
minute : '%H:%M',
hour : '%H:%M',
day : '%m-%d',
week : '%m-%d',
month : '%y-%m',
year : '%Y'
}
},
tooltip : {
split : true,
shared : false,
valueDecimals: 2,//保留两位小数
shape: 'callout',
xDateFormat: '%Y-%m-%d',
headerFormat: '<span style="color:{series.color}">\u25CF</span><small>{point.key}(总个数:{point.stackTotal})</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:{
hour:"%H时",
day:"%m-%e",
month:"%Y-%m",
},
},
yAxis : [ {
labels : {
align : 'right',
},
resize : {
enabled : true
},
lineWidth : 2,
opposite: false
}, {
labels : {
align : 'right',
},
title: {
text: '异常个数: pcs'
},
offset : 0,
lineWidth : 2,
opposite: false
} ],
plotOptions : {
series : {
showInLegend : true
},
column : {
stacking : 'normal',
dataLabels : {
//enabled: true,
color : (Highcharts.theme && Highcharts.theme.dataLabelsColor)
|| 'white',
style : {
textShadow : '0 0 3px black'
}
}
}
},
series : getSeries(tArr,seriesName)//注意这里是tArr而非datas
});
}
</script>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
