高图，三个中的一个输入不起作用

Question

我创建了三个输入框，它们应该过滤图表。第二种选择似乎不起作用。到目前为止，我尚未在代码中发现任何问题。

//JSON query
var json_data = [
  {
    "mip": {
      "id": 125,
      "name": "One",
      "code": "One"
    },
    "briefNetSpendInEuro": 2200,
    "postNetSpendInEuro": 0,
    "proposalSpendInEuro": 3530
  },
  {
    "mip": {
      "id": 125,
      "name": "Two",
      "code": "Two"
    },
    "briefNetSpendInEuro": 12052,
    "postNetSpendInEuro": 2516,
    "proposalSpendInEuro": 5358
  },
  {
    "mip": {
      "id": 531,
      "name": "Three",
      "code": "Three"
    },
    "briefNetSpendInEuro": 5391,
    "postNetSpendInEuro": 9812,
    "proposalSpendInEuro": null
  }
]

var categories = [];
var series = [];
var brief = [];
var post = [];
var proposal = [];

//JSON manipulation to prepare the data for the highchart
json_data.forEach(function(element) {
  categories.push(element.mip.code);
  brief.push(element.briefNetSpendInEuro = element.briefNetSpendInEuro || 0);
  post.push(element.postNetSpendInEuro = element.postNetSpendInEuro || 0);
  proposal.push(element.proposalSpendInEuro = element.proposalSpendInEuro || 0);
});

//Filter creation


$(function() {
  var chart = new Highcharts.Chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Spend per Media Group'
    },
    xAxis: {
      categories: [{
        "class": "One",
        "name": "One"
      }, {
        "class": "Two",
        "name": "Two"
      }, {
        "class": "Three",
        "name": "Three"
      }],
      labels: {
        formatter: function() {
          return this.value.name;
        },
        useHTML: true
      }
    },
      yAxis: {
          min: 0,
          title: {
              text: 'Spend (EUR)'
          }
      },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key.name}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.,0f} </b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {

    },
      series: [{
          name: 'Brief Net',
          data: brief

      }, {
          name: 'Post Net',
          data: post

      }, {
          name: 'Proposal',
          data: proposal

      }]
  }, function() {
    $('input[type=checkbox]').bind('click', function() {
      togglePointsByClass(this.value, $(this).is(':checked'), chart)
    });
  });
  var visibleArr = [0, 1, 2];

  function togglePointsByClass(className, shouldShow, chart) {
    var isChartDirty = false;
    if (shouldShow) {
      chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
        if (category.class === className) {
          visibleArr.push(i);
        }
      });
    } else {
      chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
        if (category.class === className && visibleArr.indexOf(i) > -1) {
          visibleArr.splice(visibleArr.indexOf(i), 1);
        }
      });
    }
    if (visibleArr.length) {
      chart.xAxis[0].update({
        min: Math.min.apply(null, visibleArr),
        max: Math.max.apply(null, visibleArr)
      })
    }
  }
  $('#container').highcharts().redraw();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="row">
   <div class="col-xs-12">
     <div class="box-first box-container">
       <div class="row">
         <div class="col-xs-4">
          <input type="checkbox" name="One" value="One" checked> One
         </div>
         <div class="col-xs-4">
          <input type="checkbox" name="Two" value="Two" checked> Two
         </div>
         <div class="col-xs-4"> 
           <input type="checkbox" name="Three" value="Three" checked> Three
         </div>
       </div>
      </div>
   </div>
</div>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Answer 1

概念是每次重新计算系列并确定要显示的系列。

我对您的数据进行了初始计算，并将其转换为这样的函数，每次使用visibleArr进行调用。

const calcData = (arr) => {

  const brief = [];
  const proposal = [];
  const post = [];

  json_data.forEach((element, i) => {

    if (arr.includes(i)) {

      brief.push(element.briefNetSpendInEuro || 0);
      post.push(element.postNetSpendInEuro || 0);
      proposal.push(element.proposalSpendInEuro || 0);
    }
  });

  return [{ name: 'Brief Net', data: brief }, 
          { name: 'Post Net', data: post },
          { name: 'Proposal', data: proposal }];
};

看看这个jsfiddle：http://jsfiddle.net/ueso3bc6/1/