[javascript] Как я могу получить доступ к диаграмме Highcharts через DOM-Container


Answers

вы можете сделать это

var chart = $("#testDivId").highcharts();

пример проверки на скрипач

Question

Когда я выношу диаграмму highcharts в контейнер div, как я могу получить доступ к объекту диаграммы через div-Container? Я не хочу, чтобы переменная диаграммы была глобальной.

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: "testDivId",
                                ...

Я хочу получить доступ к диаграмме вне контекста выше, как это (псевдокод), для вызова функций:

var chart = Highcharts.Chart("testDivId"); //access from id
chart.redraw();



Без jQuery (vanilla js):

let chartDom = document.getElementById("testDivId");
let chart = Highcharts.charts[Highcharts.attr(chartDom, 'data-highcharts-chart')]



... и с помощью коллеги ... лучший способ это сделать ...

getChartReferenceByClassName(className) {
    var foundChart = $('.' + className + '').eq(0).parent().highcharts();

    return foundChart;
}



Я нашел другой способ сделать это ... главным образом потому, что я использую Highcharts, встроенные в OutSystems Platform, и у меня нет способа контролировать, как создаются диаграммы.

То, что я нашел, было следующим:

  1. Дайте идентифицирующий класс диаграмме, используя атрибут className

    chart: {
        className: 'LifeCycleMasterChart'
    }
    
  2. Определить вспомогательную функцию для получения диаграммы по имени класса

    function getChartReferenceByClassName(className) {
    var cssClassName = className;
    var foundChart = null;
    
    $(Highcharts.charts).each(function(i,chart){    
        if(chart.container.classList.contains(cssClassName)){
            foundChart = chart;
            return;
        }
    });
    
    return foundChart;
    

    }

  3. Используйте вспомогательную функцию везде, где она вам нужна.

    var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
    

Надеюсь, это поможет вам!




Related