Wie kann ich über einen DOM-Container auf ein Highcharts-Diagramm zugreifen?

85

Wie kann ich beim Rendern eines Highcharts-Diagramms in einen Div-Container über den Div-Container auf das Diagrammobjekt zugreifen? Ich möchte die Diagrammvariable nicht global machen.

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

Ich möchte auf das Diagramm außerhalb des obigen Kontexts wie folgt zugreifen (Pseudocode), um Funktionen aufzurufen:

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

Antworten:

139

Highcharts 3.0.1

Benutzer können das Highcharts-Plugin verwenden

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

Highcharts 2.3.4

Lesen Sie aus dem Array Highcharts.charts für Version 2.3.4 und höher den Index des Diagramms aus den Daten auf der<div>

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

Alle Versionen

Verfolgen Sie Diagramme in einem globalen Objekt / einer globalen Karte nach Container-ID

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

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

Lesemodus @ Highcharts Tipps - Zugriff auf das Diagrammobjekt über eine Container-ID

PS

In den neueren Versionen von Highcharts wurden seit dem Schreiben dieser Antwort einige Ergänzungen vorgenommen, die den Antworten von @davertron, @Moes und @Przy entnommen wurden. Bitte stimmen Sie ihren Kommentaren / Antworten zu, da sie die Anerkennung dafür verdienen . Das Hinzufügen hier als diese akzeptierte Antwort wäre ohne diese unvollständig

Jugal Thakkar
quelle
10
Es sieht so aus, als ob ab Version 2.3.4 Highcharts alle Diagramme auf der Seite verfolgt: api.highcharts.com/highcharts#Highcharts
davertron
@davertron danke für das Update ... das ist eine nette Funktion, glaube nicht, dass viel Code / Aufwand erforderlich war, um dies zu haben ...
Jugal Thakkar
+1 für $ ("# container"). Data ('highchartsChart') als Highcharts-Index. es ist sehr nützlich, danke!
Shahar
1
Gibt es eine ähnliche Methode, die ich für Highstock verwenden könnte?
tnkh
45

du kannst das

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

Beispiel auf Geiger überprüfen

Nerdroid
quelle
Es hat bei mir nicht funktioniert, ich musste die @ Frzy-Antwort verwenden. Ich benutze die Version 4.1.4
David Torres
Ich
bin
1
Es gibt das Containerelement anstelle des Diagramms zurück, und deshalb hat die @ Frzy-Antwort funktioniert. Außerdem habe ich eine andere Lösung gefunden:$("#testDivId").highcharts({...}, function(chart) {...});
David Torres
Es gibt definitiv das Objekt zurück. jsfiddle.net/abbasmhd/86hLvc5s Überprüfen Sie die Konsolenausgabe, nachdem Sie auf die Schaltfläche
geklickt haben
1
Ja, in der jsfiddle ist das, da stimme ich zu. Aber nicht für alle arbeitet das gleiche, wie Sie an den 11 positiven Stimmen von @Frzy Antwort sehen können
David Torres
22
var $chartCont = $('#container').highcharts({...}),
    chartObj = Highcharts.charts[$chartCont.data('highchartsChart')];

chartCont ist ein jQuery-Objekt. chartObj ist ein Highchart-Diagrammobjekt.

Dies verwendet Highcharts 3.01

Frzy
quelle
9

Ich habe einen anderen Weg gefunden ... hauptsächlich, weil ich Highcharts verwende, die in OutSystems Platform eingebettet sind, und ich keine Möglichkeit habe, die Art und Weise zu steuern, wie Diagramme erstellt werden.

Der Weg, den ich fand, war der folgende:

  1. Geben Sie dem Diagramm mithilfe eines classNameAttributs eine identifizierende Klasse

    chart: {
        className: 'LifeCycleMasterChart'
    }
  2. Definieren Sie eine Hilfsfunktion, um das Diagramm nach Klassennamen abzurufen

    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. Verwenden Sie die Zusatzfunktion überall dort, wo Sie sie benötigen

    var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');

Hoffe es hilft dir!

Pedro Cardoso
quelle
9

Einfach mit reinem JS:

var obj = document.getElementById('#container')
    Highcharts.charts[obj.getAttribute('data-highcharts-chart')];
elo
quelle
4
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]
         }]
      });
   });

Das var chart1 ist global, sodass Sie auf das Highchart-Objekt zugreifen können, unabhängig davon, um welchen Container es sich handelt

chart1.redraw();
Manuerumx
quelle
4

Ohne jQuery (Vanille js):

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

... und mit Hilfe eines Kollegen ... ist es besser, ...

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

    return foundChart;
}
Pedro Cardoso
quelle
1

Die Antwort von @elo ist richtig und positiv, obwohl ich sie ein wenig aufräumen musste, um es klarer zu machen:

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

myChartwird dann zu einem Live- Highcharts- Objekt, das alle aktuellen Requisiten in dem Diagramm anzeigt , das in der Tabelle gerendert wurde myChartEl. Da myChartes sich um ein Highcharts- Objekt handelt, kann man Prototypmethoden direkt danach verketten , erweitern oder darauf verweisen.

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

Man kann auch erhalten myChartdurch .highcharts(), das ist ein jQueryPlug -in :

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

Der obige jQueryPlugin- Ansatz muss jQuerygeladen werden, bevor das Plugin verwendet wird, und natürlich das Plugin selbst. Es war das Fehlen dieses Plugins, das mich dazu brachte, nach alternativen Möglichkeiten zu suchen, um dasselbe mit reinem Vanille-JavaScript zu erreichen.

Mit dem reinen JS-Ansatz konnte ich das tun, was ich brauchte (das zweite Code-Snippet), ohne mich auf Folgendes verlassen zu müssenjQuery :

Wallace Sidhrée
quelle