HighChart: генерировать OnClick() с помощью цикла для 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() в цикле.

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; 
    } 
    }); 
});