highcharts.js进行多图表封装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighChart组件底层封装--调用实例</title>
<style>
div{
margin-left: 200px;
margin-top: 10px;
width: 800px;
height: 260px;
}
</style>
<script src="js/jquery.min.js"></script>
<!--描述：highchart 公共js-->
<script src="js/code/highcharts.src.js"></script>
<script src="js/code/highcharts-more.js"></script>
<script src="js/code/modules/exporting.js"></script>
<!--描述：highchart 旭日图js-->
<script src="js/code/modules/sunburst.src.js"></script>
<!--描述：highchart 颜色js-->
<script src="js/code/themes/dark-blue.src.js"></script>
<!--描述：highchart 封装类js -->
<script src="js/highchartPack.js"></script>
</head>
<body>
<div id="container"></div>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
<div id="container4"></div>
<script>
$(document).ready(function(){
var chart=new ChartPack();
chart.getChartData('container', 'column', "localhost:8080/cems");
var chart1=new ChartPack();
chart1.getChartData('container1', 'line', "localhost:8080/cems");
var chart3=new ChartPack();
chart3.getChartData('container3', 'spline', "localhost:8080/cems");
var chart2=new ChartPack();
chart2.getChartData('container2', 'sunburst', "localhost:8080/cems");
})
</script>
</body>
</html>
function ChartPack() {
Highcharts.setOptions({
global: {
useUTC: false
},
credits: {
enabled: false
},
legend: {
enabled: false
},
exporting: {
enabled: false
}
});
//折线图请求数据
this.getChartData = function(selector, type, dataUrl) {
var url;
var chartType;
if(type == 'column') {
//柱形图
chartType = type;
url = dataUrl;
} else if(type == 'line') {
//折线图
chartType = type;
url = dataUrl;
} else {
//饼图
chartType = type;
url = dataUrl;
}
// ZAction.requestJson(url, {}, function(result) {
// if(result.flag) {
//调用封装参数
var data = {};
data.title = 'xiaowang';
data.unit = '人';
data.staValue = [9.9, 29.9, 39.9, 49.9, 59.9, 69.9];
this.proceData(selector, data, chartType);
// }
//
// });
};
//各图表数据组装
this.proceData = function(selector, data, type) {
//图表一级标题和小标题 -- 公用
var arg = {};
arg.title = data.title;
arg.unit = data.unit;
if(type == 'column' || type == 'line') {
//横坐标
var x = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
//图表series中的data
var svalue = [];
$.each(data.staValue, function(i, v) {
svalue.push(v);
})
Highcharts.chart(selector, this.lineandColumnOption(arg, x, svalue, type));
} else if(type == 'spline') {
var svalue = [];
$.each(data.staValue, function(i, v) {
svalue.push(v);
})
Highcharts.chart(selector, this.splineOption(svalue),
function(c) {
ChartPack.activeLastPointToolip(c)
});
} else if(type == 'sunburst') {
//旭日图 ...
Highcharts.getOptions().colors.splice(0, 0, 'transparent');
var levels = [];
Highcharts.chart(selector, this.sunburstOption(arg, data, levels));
}
}
//折线图 柱状图
this.lineandColumnOption = function(arg, categories, data, type) {
var dataLine = {
chart: {
type: type,
backgroundColor: 'rgba(255, 255, 255, 0)'
},
title: {
text: arg.title
},
subtitle: {
text: arg.unit
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormatter: function() {
return '<span style="color:' + this.color + '">' +
Highcharts.dateFormat('%Y-%m-%d', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2) + '<a style="font-size:10px;"> 万吨</a></span>';
}
},
//
// legend: {
// layout: 'vertical',
// align: 'right',
// verticalAlign: 'middle',
// borderWidth: 0
// },
series: [{
name: 'Tokyo',
data: data
}]
};
return dataLine;
}
//旭日图
this.sunburstOption = function(arg, data, levels) {
var rdata = {
chart: {
type: 'sunburst',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
// backgroundColor: 'rgba(255, 255, 255, 0)'
},
title: {
text: '2017 世界人口分布'
},
subtitle: {
text: ''
},
series: [{
type: 'sunburst',
data: data,
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
/**
* A custom formatter that returns the name only if the inner arc
* is longer than a certain pixel size, so the shape has place for
* the label.
*/
formatter: function() {
var shape = this.point.node.shapeArgs;
var innerArcFraction = (shape.end - shape.start) / (2 * Math.PI);
var perimeter = 2 * Math.PI * shape.innerR;
var innerArcPixels = innerArcFraction * perimeter;
if(innerArcPixels > 16) {
return this.point.name;
}
}
},
levels: [{
level: 2,
colorByPoint: true,
dataLabels: {
rotationMode: 'parallel'
}
},
{
level: 3,
colorVariation: {
key: 'brightness',
to: -0.5
}
}
]
}],
tooltip: {
headerFormat: '',
pointFormat: '<b>{point.name}</b>的人口数量是：<b>{point.value}</b>'
}
}
return rdata;
}
//动态加载的直线图
this.splineOption = function(svalue) {
var dataSpline = {
chart: {
// backgroundColor: 'rgba(255, 255, 255, 0)',
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0],
chart = this;
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
ChartPack.activeLastPointToolip(chart)
}, 1000);
}
}
},
title: {
text: '动态模拟实时数据'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: '值'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: '随机数据',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for(i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
}
return dataSpline;
}
}
ChartPack.activeLastPointToolip = function(chart) {
var points = chart.series[0].points;
chart.tooltip.refresh(points[points.length - 1]);
}
--粗滤封装 可以多交流 亲测可用
转载于:https://my.oschina.net/wxy88/blog/1589449