Как я могу скрыть и показать категорию в highcharts

Question

Я пытаюсь сделать динамический способ для пользователя переключать категории линии highchart, я посмотрел на этот question, который, казалось, имел то, что я искал, Я добавил код на свою страницу, изменил несколько вещей.

Проблема заключается в том, что когда я скрываю категорию (годы), она меняет номер категории на позицию категории в highchart, и когда я показываю, она отображает данные для этой категории, но также добавляет новую категорию. ..Все мои 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(); 
     } 
    });}); 

Спасибо!

Answer 1

Если вы установили категории уставок и т. Д., Вы можете поймать событие флажка и показать/скрыть элемент 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(); 
      } 
     }); 
    }); 

http://jsfiddle.net/e33bh48x/2/