javascript - Highcharts : generate onclick() by for loop to addSeries

Question

例如我有一个这样的图表:

$(function () {
$('#KeywordTrend').highcharts({
    chart:{
        width:500
    },
    title: {
        text: false
        },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
        name:'kit',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

我创建了三个按钮，以允许用户将所需数据添加到图表中，如下所示

var name = ['john','mary','july'];

    var executed = false;
    var executed2 = false;
    var executed3 = false;

    $(".test0").click(function(){
         console.log(executed);
              if (!executed) {
        var chart = $('#KeywordTrend').highcharts();
        var data =  [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4];
        chart.addSeries({
                name: name[0],
                data: data
        });
    }
    executed = true;
            console.log(executed);
    });


    $(".test1").click(function(){
         console.log(executed2);
          if (!executed2) {
            var chart2 = $('#KeywordTrend').highcharts();
                chart2.addSeries({
                    name:name[1],
                    data: [194.1, 35.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]

            })
            executed2 = true;
            console.log(executed2);
          }
        });

    $(".test2").click(function(){
         console.log(executed3);
          if (!executed3) {
            var chart3 = $('#KeywordTrend').highcharts();
                chart3.addSeries({
                    name:name[2],
                    data: [194.1, 85.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]

            })
            executed3 = true;
            console.log(executed3);
          }
        });

上面的 click() 是重复的，在维护方面不好，所以我想问一下是否有办法把这些 click()在 for 循环中。

var executed 只是一个检查器，只允许用户执行一次函数。

Answer 1

请看下面的方法。在这里，我删除了 boolean 标志 executed、executed2 和 executed3 的使用，因为这些在通用逻辑中使用起来有点棘手。取而代之的是，我使用 $.data() 技术来存储有关该特定按钮之前是否被单击过的信息。希望这对您有所帮助:

var name = ['john', 'mary', 'july'];

var data_array = [];

data_array[0] = [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4];
data_array[1] = [194.1, 35.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4];
data_array[2] = [194.1, 85.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4];



$(function() {
  $('#KeywordTrend').highcharts({
    chart: {
      width: 500
    },
    title: {
      text: false
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
      name: 'kit',
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
  });


  $("[class^='test'").click(function() {
    var current_id = $(this).attr("class");
    var number = current_id.replace("test", "");
   
    var isExecuted = $(this).data("executed");

    console.log(isExecuted);
    if (!isExecuted) {
      var chart = $('#KeywordTrend').highcharts();
      var data = data_array[number]
      chart.addSeries({
        name: name[number],
        data: data
      });
    }
    $(this).data("executed", true);
    console.log($(this).data("executed"));
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="KeywordTrend"></div>

<button class="test0">button 1</button>
<button class="test1">button 2</button>
<button class="test2">button 3</button>