HighChart：生成的onclick（）由for循环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 s只是一个检查器，只允许用户执行一次该功能。

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

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

$('.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'>

Answer 3

，我发现你的代码的最大问题是，你没有统一的数据和代码的相关位的方式。现在，您会发现他们的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; 
    } 
    }); 
});