我怎样才能隐藏和显示高分图中的类别 [英] How can I hide and show a category in highcharts
本文介绍了我怎样才能隐藏和显示高分图中的类别的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在试图为用户提供一种动态的方式来切换一行高分布图的类别，我看了这个问题，似乎有我在找的东西，我将代码添加到我的页面，改变了一些东西。
问题在于，当我隐藏一个类别（年）时，它将类别的数字更改为高图中类别的位置，当我显示它时该类别的数据，但也增加了一个新的类别...这是我的 http://jsfiddle.net/antonioj1015 / 3pxbat0p /
$（function（）{
var chart = new Highcharts.Chart（{
图：{
renderTo：'container'，
type：'line'
}，
title：{
text：'Name'，
x：-20 // center
}，
字幕：{
text：'来源：'，
x：-20
}，
xAxis：{
categories：['2009'，' 2010'，'2011']
}，
yAxis：{
title：{
text：'Porc（％）'
}，
plotLines ：[{
value：0，
width：1，
color：'＃808080'
}]
}，
tooltip：{
valueSuffix：'％'
}，
图例：{
layout：'vertical'，
align：'right'，
verticalAlign：'middle'，
borderWidth：0
}，
series：[{id：'id09'，name：'0-9'，data：[0.29，0.29，0.26]}，
数据：[0.96,1.08,0.87]}，
{id：'id2029'，名称：'20 -29'，data：[2.55， 2.34,1.68]}，
{id：'id3039'，名称：'30 -39'，数据：[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'，数据：[16.99,18.80,20.33]}，
{id：'id80omas'，名称：'80 o mas'，数据：[6.07,7.21,7.82]}]
}）; $（$）$ $ $ $ $ $$$$$$$$ ch $$ ;
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 da ta_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（）;
}
}）; $（$（$（$））$（$$）; $ b $（＃chkbox_2010）on（click，function（e）{
var tmp_pl = $ .trim（$（this）.data（val））如果（$（this）.is（：checked））{
var categories = chart.xAxis（b）var cat_name = $（this）.data（val）;
[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（ （60））。addPoint（27.28）;
chart.get（id7079）。addPoint（18.80）;
chart.get（id80omas）。addPoint（7.21）;
chart .redraw（）;
} else {
var cat;
var data_ser ies = [];
$ .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））; $ b $如果（$（this）.is（：checked））{
var categories = chart.xAxis（b）var cat_name = $（this）.data（val）;
[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（ addPoint（7.81）;
chart.get（id7079）。addPoint（20.33）;
chart.get（id80omas）。addPoint（7.82）;
chart .redraw（）;
} else {
var cat;
var data_ser ies = [];
$ .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 = ='）：
$ check.is（'：checked'）？tick.label.show（）：tick.label.hide（）;
}
}）;
}）;
http://jsfiddle.net/e33bh48x/2/
I've been trying to make a dynamical way for the user to toggle the categories of a line highchart, I looked at this question that seemed to have what I was looking for, I added the code to my page, changed a few things.
The problem is that when I hide a category(years) it changes the number of the category to the position of the category in the highchart and when I show it displays the data for that category but also adds a new category...Here's my 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();
}
});});
Thanks!!
解决方案
Instaed of setting categories etc, you can catch checkbox event and show/hide the particual SVG element.
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();
}
});
});
http://jsfiddle.net/e33bh48x/2/
这篇关于我怎样才能隐藏和显示高分图中的类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
