Java Highcharts
彭华皓
// An highlighted block
<script src="http://code.highcharts.com/highcharts.js"></script>``
// 初始化图表 地图
<div id="map" style="width:100%;height: 550px;"></div>
var map = new Highcharts.Map('map', {
title: {
text: '上海市'
},
colorAxis: {
min: 0,
minColor: 'rgb(255,255,255)',
// maxColor: '#006cee',
maxColor: '#00a65a',
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '样本监测人数</b> <br>' +
'<b style=" color:#3c8dbc" >成年人数 ： ' + this.point.adult + '</b> <br>' +
'<b style=" color:#00a65a" >老年人数 ： ' + this.point.old + '</b><br>' +
'<b style=" color:#f39c12 ">幼儿人数 ： ' + this.point.child +'</b> </p><br>'+
'<b style=" color:#605ca8 ">总 人 数 ： ' + this.point.sum + '</b><br>' +
'<b style=" color:#605ca8 ">总完成率 ： ' + this.point.value + ' %</b><br>' ;
}
},
series: [{
data: [{"old": 0,"name":"浦东新区","sum": 0,"adult": 0,"value": 0,"child": 0}........],
name: '样本监测人数',
mapData: Highcharts.maps['cn/shanghai'],
joinBy: 'name' // 根据 name 属性进行关联
}]
});
<div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></div>
<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"> </div>
<div class="chart" id="line-chart" style="height: 250px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
// area 面积函数图数据
var area = new Morris.Area({
element : 'revenue-chart',
resize : true,
data : data,
xkey : 'y',
ykeys : ['adult', 'old', 'child'],
labels : ['成年', '老年', '幼儿'],
lineColors: ['#a0d0e0', '#3cda92', '#ecab44'],
hideHover : 'auto'
});
// Sales Graph 折线函数图数据
var line = new Morris.Line({
element : 'line-chart',
resize : true,
data :[{"old":106,"y":"2020-08-25","adult":94,"child":0},{"old":87,"y":"2020-08-24","adult":211,"child":0}............],
xkey : 'y',
ykeys : ['adult', 'old', 'child'],
labels : ['成年', '老年', '幼儿'],
lineColors : ['#a0d0e0', '#3cda92', '#ecab44'],
lineWidth : 2,
hideHover : 'auto',
ymax : 'auto',
marginRight : 10,
gridTextColor : '#fff',
gridStrokeWidth : 0.4,
pointSize : 4,
pointStrokeColors: ['#efefef'],
gridLineColor : '#efefef',
gridTextFamily : 'Open Sans',
gridTextSize : 10
});
// Donut Chart 饼图
var donut = new Morris.Donut({
element : 'sales-chart',
resize : true,
colors : ['#3c8dbc', '#f56954', '#00a65a'],
data : [
{ label: '成年', value: 23962 },
{ label: '老年', value: 12161 },
{ label: '幼儿', value: 35919 }
],
hideHover: 'auto'
});
// Fix for charts under tabs
$('.box ul.nav a').on('shown.bs.tab', function () {
area.redraw();
donut.redraw();
line.redraw();
});
//柱状图
<div id="container" style=" margin: 0 auto"></div>
var chart= {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
},
type: 'column'
};
var title = {
text: '各区男女年龄段柱状统计图'
};
var xAxis = {
categories: ["浦东新区","嘉定区","普陀区","奉贤区","崇明区","青浦区","松江区","金山区","闵行区","宝山区","静安区","黄浦区","杨浦区","虹口区","长宁区","徐汇区"]
};
var yAxis ={
allowDecimals: false,
min: 0,
title: {
text: '监测有效人数'
}
};
var plotOptions = {
column: {
shadow: true, //阴影
stacking: 'normal',
pointPadding: 0.2, //柱子之间的间隔(会影响到柱子的大小)
// groupPadding:0, //分组之间的距离值
borderWidth: 1,//柱子边框的大小
// pointWidth: 16 ,//柱子之间的距离值
minPointLength: 2, //最小数据值那一条柱子的长度(如果是0，可能看不到，可以设置出来)
allowPointSelect: false,
animation: true, //图形出来时候的动画
},
// 数据列通用配置
series : {
// 数据标签
/* dataLabels : {
align : 'center' ,// 数据列的水平对齐方式
enabled : true ,//如何设置为true，数据列自动显示列的信息，默认false
backgroundColor : 'red' ,// 数据标签背景颜色
borderColor : 'red' ,// 数据标签边框颜色
borderWidth : 1 ,//数据标签边框宽度
borderRadius : 5 ,// 数据标签边框圆角
color : 'red', // 数据标签字体颜色
padding : 5 ,// 数据标签的内边距
x: 0, // 坐标显示位置
y: -20 // y轴显示
}*/
events:{
legendItemClick : function(event){
return false;// 直接 return false 即可禁用图例点击事件
}
}
}
};
var credits = {
enabled: false
};
var series= [
{
name: '成年',
sex:"男",
data: [0,619,122,0,164,117,0,0,0,0,84,0,1,12,0,3],
stack: 'male',
showInLegend: true
},{
name: '老年',
sex:"男",
data: [0,619,122,0,164,117,0,0,0,0,84,0,1,12,0,3],
stack: 'male',
showInLegend: true
},{
name: '幼儿',
sex:"男",
data: [0,619,122,0,164,117,0,0,0,0,84,0,1,12,0,3],
stack: 'male',
showInLegend: true
},{
name: '成年',
sex:"女",
data: [0,619,122,0,164,117,0,0,0,0,84,0,1,12,0,3],
stack: 'female',
showInLegend: false
},{
name: '老年',
sex:"女",
data: [0,619,122,0,164,117,0,0,0,0,84,0,1,12,0,3],
stack: 'female',
showInLegend: false
},{
name: '幼儿',
sex:"女",
data: [0,619,122,0,164,117,0,0,0,0,84,0,1,12,0,3],
stack: 'female',
showInLegend: false
}
];
Highcharts.setOptions({ // 颜色从下面几个当中选择，不设置，系统自动选颜色
colors: ['#00c0ef', '#00a65a', '#f39c12']
});
var tooltip = {
formatter: function () {
return '<b>' + this.x + '-'+ this.series.userOptions.sex + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'总人数: ' + this.point.stackTotal;
}
};
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
json.tooltip = tooltip;
$('#container').highcharts(json);
}
类似资料：