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 - доступ к объекту диаграммы по идентификатору контейнера
PS
Некоторые дополнения были внесены в новые версии Highcharts с момента написания этого ответа и взяты из ответов @davertron, @Moes и @Przy, пожалуйста, проголосуйте за их комментарии / ответы, поскольку они заслуживают признания за них. Добавление их сюда в качестве принятого ответа было бы неполным без этих
ты можешь это сделать
var chart = $("#testDivId").highcharts();
проверить пример на скрипач
источник
$("#testDivId").highcharts({...}, function(chart) {...});
var $chartCont = $('#container').highcharts({...}), chartObj = Highcharts.charts[$chartCont.data('highchartsChart')];
chartCont - это объект jQuery. chartObj - это объект диаграммы Highchart.
Это использует Highcharts 3.01
источник
Просто с чистым JS:
var obj = document.getElementById('#container') Highcharts.charts[obj.getAttribute('data-highcharts-chart')];
источник
Я нашел другой способ сделать это ... в основном потому, что я использую 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');
Надеюсь, это вам поможет!
источник
Без jQuery (vanilla js):
let chartDom = document.getElementById("testDivId"); let chart = Highcharts.charts[Highcharts.attr(chartDom, 'data-highcharts-chart')]
источник
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] }] }); });
Var chart1 является глобальным, поэтому вы можете использовать его для доступа к объекту de highchart, не имеет значения, какой контейнер является
источник
... и с помощью коллеги ... лучший способ сделать это ...
getChartReferenceByClassName(className) { var foundChart = $('.' + className + '').eq(0).parent().highcharts(); return foundChart; }
источник
Ответ @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
:источник