自己写的highcharts级联(点击事件)
2024-09-05 16:43:32
$.fn.extend({
Zhu: function (option) {
var id = $(this).attr("id");
$('#' + id).highcharts({
chart: {
type: 'column'
},
title: {
text: option.title
},
xAxis: {
categories: option.cate,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: option.ytext
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} ' + option.unit + '</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: option.series
});
},
Pie: function (option) {
var id = $(this).attr("id");
$('#' + id).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: option.title
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: option.name,
data: option.series
}]
})
},
BarPlus: function (option) {
var id = $(this).attr("id");
$('#' + id).highcharts({
chart: {
type: 'bar'
},
title: {
text: option.title
},
xAxis: {
categories: option.cate
},
yAxis: {
min: 0,
title: {
text: option.ytext
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: option.series
});
},
PieCol: function (option) {
var id = $(this).attr("id");
$('<div class="chart1" id="' + id + '1">')
.appendTo('#' + id)
.highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: option.title
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: option.name,
data: option.series,
events: {
click: function (event) {
$.post(option.url, { pKey: event.point.name, begin: $("#dtpBegin").val(), end: $("#dtpEnd").val(), brand: $("#brand").val() }, function (e) {
var obj = eval('(' + e + ')');
$('#' + id + "2").highcharts({
chart: {
type: 'column'
},
title: {
text: event.point.name
},
xAxis: {
categories: [event.point.name],
visible: false
},
yAxis: {
min: 0,
title: {
text: ''
},
visible: false
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: obj
});
})
}
}
}]
});
$('<div class="chart2" id="' + id + '2">').appendTo('#' + id);
},
PiePie: function (option) {
var id = $(this).attr("id");
$('<div class="chart3" id="' + id + '1">')
.appendTo('#' + id)
.highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: option.title
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: option.name,
data: option.series,
events: {
click: function (event) {
$.post(option.url, { pKey: event.point.name, begin: $("#dtpBegin").val(), end: $("#dtpEnd").val(), brand: $("#brand").val() }, function (e) {
var obj = eval('(' + e + ')');
$('#' + id + "2").highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: event.point.name
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: '占比',
data: obj,
events: {
click: function (event) {
if (cb1 != null && cb1 != undefined) {
cb1(event);
}
}
}
}]
});
})
}
}
}]
});
$('<div class="chart4" id="' + id + '2">').appendTo('#' + id);
},
BarLeft: function (option) {
var id = $(this).attr("id");
var cate = ['描述相符', '服务态度', '物流服务'];
$('#' + id).highcharts({
chart: {
type: 'bar'
},
title: {
text: option.title
},
xAxis: [{
categories: cate,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: cate,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return this.value;
}
},
min: -10,
max: 10
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', ' + this.point.category + '</b><br/>' +
'数量: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: '低于4.7(不含)店铺',
data: option.series1,
events: {
click: function (event) {
if (cb2 != null && cb2 != undefined) {
cb2(event, this);
}
}
}
}, {
name: '高于4.9(不含)店铺',
data: option.series2,
events: {
click: function (event) {
if (cb2 != null && cb2 != undefined) {
cb2(event, this);
}
}
}
}]
});
}
})
var cb1, cb2;
最新文章
- Python新建动态命名txt文件
- java的poi技术读，写Excel[2003-2007,2010]
- 边工作边刷题：70天一遍leetcode: day 71-3
- C/C++中的可变参函数
- mysql 支持emoji
- Android资源管理框架（Asset Manager）简要介绍和学习计划
- linux下Python网络编程框架-Twisted安装
- hibernate ——关联关系
- linux java.net.UnknownHostException异常
- 4.Linux的文件搜索命令
- TreeMap源码
- 机器视觉：MobileNet 和 ShuffleNet
- Sql- Group By ,Where,having用法
- How to install Lion on PC
- my live boadband
- 异象石（就是sdio宝藏那题）
- jQuery学习--Code Organization Concepts
- 如何配置Java环境变量[转]
- SSM 搭建精美实用的管理系统
- 【linux】vim/vi常用指令