Highcharts - Получение диаграммы на события нажатия

Question

мне нужно создать 9 круговых диаграмм с теми же параметрами в одной странице, я использую следующую функцию для их создания:

function newChart(series_id, div_name) { 
    this.chart = { 
     height: 450, 
     marginBottom: 70 
    }, 
    this.title = { 
     floating: true 
    }, 
    this.subtitle = { 
     floating: true 
    }, 
    this.legend = pie_legend, 
      this.tooltip = tooltip_, 
      this.plotOptions = { 
       pie: { 
        showInLegend: true, 
        size: '100%', 
        borderWidth: 2, 
        borderColor: 'black', 
        point: { 
         events: { 
          mouseOut: function() { 
           setTranslation(this, false); 
          }, 
          mouseOver: function() { 
           setTranslation(this, true); 
          }, 
          click: function() { 
           var drilldown = this.drilldown; 
           if (isNumber(drilldown)) 
           { 
            chart3.series[0] = chart3.drilldown.series[drilldown]; 
            require(['jquery', 'charts'], function ($, charts) { 
             $(function() { 
              var tempScrollTop = $(window).scrollTop(); 
              charts.pie(div_name, chart3); 
              $(window).scrollTop(tempScrollTop); 
             }); 
            }); 
            chart3.colors = chart_colors; 
           } 
           else { 
            chart3.series[0] = series_id.series[0]; 
            require(['jquery', 'charts'], function ($, charts) { 
             $(function() { 
              var tempScrollTop = $(window).scrollTop(); 
              charts.pie(div_name, chart3); 
              $(window).scrollTop(tempScrollTop); 
             }); 
            }); 
            chart3.colors = ["#FF7070", "#FFC870", "#B0DDC2", "#82CA9D", "#409661"]; 
           } 
          } 
         } 
        }, 
        dataLabels: { 
         enabled: false 
        } 
       }, 
       series: { 
        dataLabels: { 
         style: { 
          fontWeight: 'bold', 
          fontSize: '16px' 
         } 
        } 
       } 
      }, 
    this.colors = ["#FF7070", "#FFC870", "#B0DDC2", "#82CA9D", "#409661"], 
      this.series = [], 
      this.drilldown = { 
       series: [] 
      } 
} 
; 

На событие щелчка Я хочу использовать тот же объект, который я создаю для создания функций. Однако я не могу найти способ сделать его динамичным, если я вручную изменю диаграмму3 для chartX, они индивидуально созданы правильно и работают правильно. Мой вопрос заключается в том, как получить объект диаграммы внутри функции щелчка, я не могу использовать «это», потому что в этой области он извлекает точку на диаграмме (в этом случае фрагмент круговой диаграммы). Поэтому я хочу, чтобы получить что-то вроде:

click: function() { 
    var drilldown = this.drilldown; 
    if (isNumber(drilldown)) 
    { 
     thisChart.series[0] = thisChart.drilldown.series[drilldown]; 
     require(['jquery', 'charts'], function ($, charts) { 
      $(function() { 
       var tempScrollTop = $(window).scrollTop(); 
       charts.pie(div_name, thisChart); 
       $(window).scrollTop(tempScrollTop); 
      }); 
     }); 
     thisChart.colors = chart_colors; 
    } 
    else { 
     thisChart.series[0] = series_id.series[0]; 
     require(['jquery', 'charts'], function ($, charts) { 
      $(function() { 
       var tempScrollTop = $(window).scrollTop(); 
       charts.pie(div_name, thisChart); 
       $(window).scrollTop(tempScrollTop); 
      }); 
     }); 
     thisChart.colors = ["#FF7070", "#FFC870", "#B0DDC2", "#82CA9D", "#409661"]; 
    } 
} 

Я прочитал, что связывание функции может помочь, но я понятия не имею, как я хотел бы сделать это, и я попытался проходя тот же объект в качестве параметра функции, но это не работает, и попытался использовать его как строковую переменную для передачи в качестве объекта в функции, но он не считается объектом или не дает мне ошибок.

Я совершенно не знаком с Javascript (например, опытом 3-4 недели), так что несите меня. Я мог бы просто создать независимый объект диаграммы для каждого графика, повторяя код 9 раз и просто меняя часть chart3 на chart1, chart2 и т. Д., И он работает, но я хочу сделать это проще.

Answer 1

Как-то задавать вопросы помогает мне придумать остроумие ответ, читая о кронштейне нотации я придумал следующее:

click: function() { 
    var drilldown = this.drilldown; 
    var chartName = name; 
    if (isNumber(drilldown)) 
    { 
     window[chartName].series[0] = window[chartName].drilldown.series[drilldown]; 
     require(['jquery', 'charts'], function ($, charts) { 
      $(function() { 
       var tempScrollTop = $(window).scrollTop(); 
       charts.pie(div_name, window[chartName]); 
       $(window).scrollTop(tempScrollTop); 
      }); 
     }); 
     window[chartName].colors = chart_colors; 
    } 
    else { 
     window[chartName].series[0] = series_id.series[0]; 
     require(['jquery', 'charts'], function ($, charts) { 
      $(function() { 
       var tempScrollTop = $(window).scrollTop(); 
       charts.pie(div_name, window[chartName]); 
       $(window).scrollTop(tempScrollTop); 
      }); 
     }); 
     window[chartName].colors = ["#FF7070", "#FFC870", "#B0DDC2", "#82CA9D", "#409661"]; 
    } 
} 

Я прохожу имя, когда я создаю новую схему:

chart1 = new newChart(series1,"chart-pie1","chart1"); 
chart2 = new newChart(series2,"chart-pie2","chart2") 
chart3 = new newChart(series3,"chart-pie3","chart3"); 

И он работает, как я хочу, чтобы он работал сейчас. Во всяком случае, я был бы признателен за предложения по минимизации кода. Я знаю, что мой код очень повторяющийся, я просто изучаю javascript, поэтому мое кодирование не очень эффективно или достаточно просто.