Kiedy renderuję highcharts-chart do kontenera div, w jaki sposób mogę uzyskać dostęp do obiektu wykresu za pośrednictwem kontenera div? nie chcę, aby zmienna wykresu była globalna.
var chart = new Highcharts.Chart({
chart: {
renderTo: "testDivId",
...
Chcę uzyskać dostęp do wykresu poza powyższym kontekstem, takim jak ten (pseudokod), aby wywołać funkcje:
var chart = Highcharts.Chart("testDivId"); //access from id
chart.redraw();
źródło
możesz to zrobić
var chart = $("#testDivId").highcharts();
sprawdź przykład na Fiddler
źródło
$("#testDivId").highcharts({...}, function(chart) {...});
var $chartCont = $('#container').highcharts({...}), chartObj = Highcharts.charts[$chartCont.data('highchartsChart')];
chartCont to obiekt jQuery. chartObj to obiekt wykresu Highchart.
Używa Highcharts 3.01
źródło
Po prostu z czystym JS:
var obj = document.getElementById('#container') Highcharts.charts[obj.getAttribute('data-highcharts-chart')];
źródło
Znalazłem inny sposób na zrobienie tego ... głównie dlatego, że używam Highcharts, które są osadzone w platformie OutSystems i nie mam sposobu na kontrolowanie sposobu tworzenia wykresów.
Sposób, który znalazłem, był następujący:
Nadaj wykresowi klasę identyfikującą za pomocą
className
atrybutuchart: { className: 'LifeCycleMasterChart' }
Zdefiniuj funkcję pomocniczą, aby uzyskać wykres według nazwy klasy
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;
}
Korzystaj z funkcji pomocniczej wszędzie tam, gdzie jej potrzebujesz
var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
Mam nadzieję, że ci to pomoże!
źródło
Bez jQuery (vanilla js):
let chartDom = document.getElementById("testDivId"); let chart = Highcharts.charts[Highcharts.attr(chartDom, 'data-highcharts-chart')]
źródło
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] }] }); });
Zmienna chart1 jest globalna, więc możesz jej użyć, aby uzyskać dostęp do obiektu wysokiego wykresu, który nie ma znaczenia, którym jest kontener
źródło
... iz pomocą kolegi ... lepszym sposobem na to jest ...
getChartReferenceByClassName(className) { var foundChart = $('.' + className + '').eq(0).parent().highcharts(); return foundChart; }
źródło
Odpowiedź @elo jest poprawna i pozytywnie oceniona, chociaż musiałem ją trochę uporządkować, aby była jaśniejsza:
const myChartEl = document.getElementById('the-id-name'); const myChart = Highcharts.charts[myChartEl.getAttribute('data-highcharts-chart')];
myChart
następnie staje się aktywnym obiektem Highcharts, który odsłania wszystkie obecne rekwizyty obecne na wykresie, który jest renderowany wmyChartEl
. PonieważmyChart
jest to obiekt Highcharts , można bezpośrednio za nim łączyć metody prototypowe, rozszerzać go lub odwoływać się do niego.myChart.getTable(); myChart.downloadXLS(); setTimeout(() => Highcharts.fireEvent(myChart, "redraw"), 10);
Można również uzyskać
myChart
poprzez.highcharts()
, który jestjQuery
plugin:var myChart = $("#the-id-name").highcharts();
Powyższe podejście do
jQuery
wtyczki wymagajQuery
załadowania przed użyciem wtyczki i oczywiście samej wtyczki. To brak tej wtyczki skłonił mnie do poszukiwania alternatywnych sposobów osiągnięcia tego samego z czystym waniliowym JavaScriptem.Używając czystego podejścia JS, byłem w stanie zrobić to, czego potrzebowałem (drugi fragment kodu) bez konieczności polegania na
jQuery
:źródło