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

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

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

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

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

Ответ 1

Highcharts 3.0.1

Пользователи могут использовать плагин highcharts

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

Highcharts 2.3.4

Считаем из массива Highcharts.charts, для версии 2.3.4 и более поздней версии индекс диаграммы можно найти по данным на <div>

 var index=$("#container").data('highchartsChart');
 var chart=Highcharts.charts[index];

Все версии

Отслеживание графиков в глобальном объекте/карте по идентификатору контейнера

var window.charts={}; 
function foo(){
  new Highcharts.Chart({...},function(chart){  
      window.charts[chart.options.chart.renderTo] = chart;
  });
}

function bar(){
  var chart=window.charts["containerId"];
}

Режим чтения @Highcharts Tips - Доступ к объекту диаграммы из идентификатора контейнера

P.S.

Некоторые дополнения были сделаны в новых версиях Highcharts после написания этого ответа и были взяты из ответов @davertron, @Moes и @Przy, пожалуйста, повысьте их комментарии/ответы, поскольку они заслуживают кредит для них. Добавление их здесь, поскольку этот принятый ответ был бы неполным без этих

Ответ 2

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

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

проверить пример на скрипке

Ответ 3

var $chartCont = $('#container').highcharts({...}),
    chartObj = Highcharts.charts[$chartCont.data('highchartsChart')];

chartCont - объект jQuery. chartObj - объект диаграммы Highchart.

Это использование Highcharts 3.01

Ответ 4

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

Я нашел следующее:

Дайте идентифицирующий класс диаграмме с помощью атрибута className
```
chart: {
    className: 'LifeCycleMasterChart'
}
```

Определите вспомогательную функцию для получения диаграммы по имени класса

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;

}

Используйте вспомогательную функцию, где вам это нужно
```
var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
```

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

Ответ 5

Просто с чистым JS:

var obj = document.getElementById('#container')
    Highcharts.charts[obj.getAttribute('data-highcharts-chart')];

Ответ 6

var chart1; // globally available
$(document).ready(function() {
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
            type: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });

Диаграмма var1 является глобальной, поэтому вы можете использовать для доступа к высокому объекту, не имеющему значения, который является контейнером

chart1.redraw();

Ответ 7

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

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

    return foundChart;
}

Ответ 8

Без jQuery (ванильный JS):

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

Ответ 9

@elo ответ правильный и лишний, хотя мне пришлось немного привести его в порядок, чтобы прояснить ситуацию:

const myChartEl = document.getElementById('the-id-name');
const myChart = Highcharts.charts[myChartEl.getAttribute('data-highcharts-chart')];

myChart затем становится живым объектом Highcharts, который выставляет все текущие реквизиты, присутствующие на диаграмме, которые визуализируются в myChartEl. Поскольку myChart является объектом Highcharts, сразу после него можно создавать цепочки методов-прототипов, расширять их или ссылаться на них.

myChart.getTable();
myChart.downloadXLS();
setTimeout(() => Highcharts.fireEvent(myChart, "redraw"), 10);

Также можно получить myChart через .highcharts(), который является плагином jQuery:

var myChart = $("#the-id-name").highcharts();

Приведенный выше подход к плагину jQuery требует загрузки jQuery перед использованием плагина и, конечно, самого плагина. Именно отсутствие этого плагина заставило меня искать альтернативные способы сделать то же самое с чистым ванильным JavaScript.

Используя чистый подход JS, я смог сделать то, что мне было нужно (второй фрагмент кода), не полагаясь на jQuery: