Question

在下面的脚本中我有两个checkboxex - 当第一个被选中时，我想只有数组＆＃34; applesData＆＃34;如图所示。选择第二个时，我想要＆＃34; cherriesData＆＃34;所示。如果同时选中了两个复选框，我希望显示两个字段的总和（applesData，cherriesData）。有任何想法吗？感谢。

＆＃13;

$(function() {
  var applesData   = [34, 32, 32, 35, 36, 39];
  var cherriesData = [54, 57, 58, 63, 67, 69];

  var categoriesName = [1, 2, 3, 4, 5, 6];

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'line',
      title: ''
    },
    title: {
      text: ''
    },
    credits: {
      enabled: false
    },
    yAxis: {
      title: {
        text: ''
      }
    },
    xAxis: {
      categories: categoriesName
    }
  });

  $('.parts').change(function() {
    value = this.getAttribute('value');
    while (chart.series.length > 0) {
      chart.series[0].remove(true);     
    }

    var outputData = [0, 0, 0, 0, 0, 0];

    if (value == 'apples') {
      for(i=0;i<applesData.length;i++){
        outputData[i] = outputData[i] + applesData[i]; 
      }

    } else if (value == 'cherries') {
      for(i=0;i<applesData.length;i++){
        outputData[i] = outputData[i] + cherriesData[i]; 
      }
    }

    chart.addSeries({
      name: 'tons',
      data: outputData,
      showInLegend: true
    });
  });

  $('.parts').first().prop('checked', true).trigger('change');
});

＆＃13;

<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>

<label>
  apples
  <input class="parts" name="g" type="checkbox" value="apples" checked>
</label>
<label>
  apples urazem
  <input class="parts" name="f" type="checkbox" value="cherries" checked>
</label>

<div id="container" style="height: 250px; width: 600px"></div>

＆＃13;

Answer 1

请记住，change函数会在复选框值更改时随时调用。由于您要在每次调用outputData时重置change，因此您无法对苹果和樱桃进行总结，因为您使用的是if else条件。因此它要么执行0 + applesData[i]，要么执行0 + cherriesData[i]，而不是两者都执行。因此，您只会显示每个数据点的苹果数或樱桃数。

看一下附带的plunker，我对你的代码进行了一些修改，并将一些逻辑分成了不同的函数。

https://plnkr.co/edit/w4A0e8kjBOwN5v2tDpq5

Answer 2

是否有一些简单的方法可以为您的解决方案添加另一个复选框（+数据阵列）？我总共需要11个复选框。

Highcharts - 选中复选框后更改值

2 个答案: