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 and 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>

Answer 2

我发现代码中遇到的最大问题是你没有办法统一相关的数据和代码。您现在可以在persons地图

下找到它们

HTML

<input class='test test0' type=button value='person1'>
<input class='test test1' type=button value='person2'>
<input class='test test2' type=button value='person3'>

JS

$(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 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];
  var chart = $('#KeywordTrend').highcharts();
  var persons = {
    person1: {
      name: 'john',
      executed: false,
    },
    person2: {
      name: 'mary',
      executed: false,
    },
    person3: {
      name: 'july',
      executed: false,
    }
  }

  $(".test").click(function(event) {
    var person = persons[event.target.value]
    if (!test.executed) {
      chart.addSeries({
        name: person.name,
        data: data
      });
      person.executed = true;
    }
  });
});

Answer 3

你可以这样做，在这里我只是将点击处理程序附加到所有元素的查询。

$('.clickMe').click(function(event) {
  alert(event.target.value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' class='clickMe' value='give'>
<input type='button' class='clickMe' value='me'>
<input type='button' class='clickMe' value='text'>

HighChart：通过for循环生成onclick（）到addSeries

3 个答案: