我一直在尝试为用户创建一种动态方式来切换线 Highcharts 的类别，我查看了这个 question似乎有我要找的东西，我将代码添加到我的页面，并更改了一些内容。
问题是，当我隐藏一个类别(年)时，它会将类别的编号更改为该类别在 Highcharts 中的位置，而当我显示它时，它会显示该类别的数据，但还会添加一个新类别。 .这是我的http://jsfiddle.net/antonioj1015/3pxbat0p/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Name',
x: -20 //center
},
subtitle: {
text: 'Source: ',
x: -20
},
xAxis: {
categories: ['2009','2010','2011']
},
yAxis: {
title: {
text: 'Porc (%)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '%'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{ id: 'id09', name: '0-9', data: [0.29, 0.29, 0.26] },
{ id: 'id1019', name: '10-19', data: [0.96, 1.08, 0.87] },
{ id: 'id2029', name: '20-29', data: [2.55, 2.34, 1.68] },
{ id: 'id3039', name: '30-39', data: [5.37, 4.67, 4.04] },
{ id: 'id4049', name: '40-49', data: [14.60, 12.65, 11.52] },
{ id: 'id5059', name: '50-59', data: [27.02, 25.68, 25.00] },
{ id: 'id6069', name: '60-69', data: [26.16, 27.28, 28.48] },
{ id: 'id7079', name: '70-79', data: [16.99, 18.80, 20.33] },
{ id: 'id80omas', name: '80 o mas', data: [6.07, 7.21, 7.82] }]
});
$("#chkbox_2009").on("click", function(e){
var tmp_pl = $.trim($(this).data("val"));
var cat_name = $(this).data("val");
if($(this).is(":checked")){
var categories = chart.xAxis[0].categories;
categories.push(cat_name);
chart.xAxis[0].setCategories(categories);
chart.get("id09").addPoint(0.29);
chart.get("id1019").addPoint(0.96);
chart.get("id2029").addPoint(2.55);
chart.get("id3039").addPoint(5.37);
chart.get("id4049").addPoint(14.60);
chart.get("id5059").addPoint(27.02);
chart.get("id6069").addPoint(26.16);
chart.get("id7079").addPoint(16.99);
chart.get("id80omas").addPoint(6.07);
chart.redraw();
} else {
var cat;
var data_series = [];
$.each(chart.series, function(sKey, sVal){
var j = sVal.data.length - 1;
var isRemoved = false;
var dt;
while(!isRemoved && j >= 0) {
var dVal = sVal.data[j];
if (dVal.category === cat_name) {
dVal.remove();
sVal.xIncrement --;
isRemoved = true;
}
j--;
}
$.each(sVal.data, function(k,v){
v.update({
x: k
});
});
});
var categories = chart.xAxis[0].categories;
categories.splice( $.inArray(cat_name, categories), 1 );
chart.xAxis[0].setCategories(categories);
chart.redraw();
}
});
$("#chkbox_2010").on("click", function(e){
var tmp_pl = $.trim($(this).data("val"));
var cat_name = $(this).data("val");
if($(this).is(":checked")){
var categories = chart.xAxis[0].categories;
categories.push(cat_name);
chart.xAxis[0].setCategories(categories);
chart.get("id09").addPoint(0.29);
chart.get("id1019").addPoint(1.08);
chart.get("id2029").addPoint(2.34);
chart.get("id3039").addPoint(4.67);
chart.get("id4049").addPoint(12.65);
chart.get("id5059").addPoint(25.68);
chart.get("id6069").addPoint(27.28);
chart.get("id7079").addPoint(18.80);
chart.get("id80omas").addPoint(7.21);
chart.redraw();
} else {
var cat;
var data_series = [];
$.each(chart.series, function(sKey, sVal){
var j = sVal.data.length - 1;
var isRemoved = false;
var dt;
while(!isRemoved && j >= 0) {
var dVal = sVal.data[j];
if (dVal.category === cat_name) {
dVal.remove();
sVal.xIncrement --;
isRemoved = true;
}
j--;
}
$.each(sVal.data, function(k,v){
v.update({
x: k
});
});
});
var categories = chart.xAxis[0].categories;
categories.splice( $.inArray(cat_name, categories), 1 );
chart.xAxis[0].setCategories(categories);
chart.redraw();
}
});
$("#chkbox_2011").on("click", function(e){
var tmp_pl = $.trim($(this).data("val"));
var cat_name = $(this).data("val");
if($(this).is(":checked")){
var categories = chart.xAxis[0].categories;
categories.push(cat_name);
chart.xAxis[0].setCategories(categories);
chart.get("id09").addPoint(0.26);
chart.get("id1019").addPoint(0.87);
chart.get("id2029").addPoint(1.68);
chart.get("id3039").addPoint(4.04);
chart.get("id4049").addPoint(11.52);
chart.get("id5059").addPoint(25.00);
chart.get("id6069").addPoint(28.48);
chart.get("id7079").addPoint(20.33);
chart.get("id80omas").addPoint(7.82);
chart.redraw();
} else {
var cat;
var data_series = [];
$.each(chart.series, function(sKey, sVal){
var j = sVal.data.length - 1;
var isRemoved = false;
var dt;
while(!isRemoved && j >= 0) {
var dVal = sVal.data[j];
if (dVal.category === cat_name) {
dVal.remove();
sVal.xIncrement --;
isRemoved = true;
}
j--;
}
$.each(sVal.data, function(k,v){
v.update({
x: k
});
});
});
var categories = chart.xAxis[0].categories;
categories.splice( $.inArray(cat_name, categories), 1 );
chart.xAxis[0].setCategories(categories);
chart.redraw();
}
});});
谢谢!!
最佳答案
代替设置类别等，您可以捕获复选框事件并显示/隐藏特定的 SVG 元素。
var $check,
val;
$('input[name="cat"]').click(function(){
$check = $(this);
val = $check.val();
$.each(chart.xAxis[0].ticks, function(i, tick){
if(tick.label && tick.label.textStr == val){
$check.is(':checked') ? tick.label.show() : tick.label.hide();
}
});
});
关于highcharts - 如何在 highcharts 中隐藏和显示类别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26745540/