highcharts-chartをdivコンテナーにレンダリングする場合、div-Containerを介してチャートオブジェクトにアクセスするにはどうすればよいですか？チャート変数をグローバルにしたくありません。
var chart = new Highcharts.Chart({
chart: {
renderTo: "testDivId",
...
関数を呼び出すために、このような上記のコンテキスト（擬似コード）の外でチャートにアクセスしたいと思います。
var chart = Highcharts.Chart("testDivId"); //access from id
chart.redraw();
回答:
ユーザーはhighchartsプラグインを使用できます
var chart=$("#container").highcharts();
Highcharts.charts配列から読み取る、バージョン2.3.4以降の場合、チャートのインデックスは、上のデータから見つけることができます。<div>
var index=$("#container").data('highchartsChart');
var chart=Highcharts.charts[index];
コンテナ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"];
}
読み取りモード@ハイチャートのヒント-コンテナIDからチャートオブジェクトにアクセスする
この回答を書いた後、Highchartsの新しいバージョンでいくつかの追加が行われ、@ davertron、@ Moes、および@Przyからの回答から取得されました。これらの功績に値するので、コメント/回答に賛成してください。この受け入れられた答えはこれらなしでは不完全になるので、ここにそれらを追加します
$("#testDivId").highcharts({...}, function(chart) {...});
別の方法を見つけました...主に、OutSystems Platformに埋め込まれているHighchartsを使用していて、グラフの作成方法を制御する方法がないためです。
私が見つけた方法は次のとおりです。
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');
お役に立てば幸いです。
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はグローバルであるため、コンテナであるかどうかに関係なく、dehighchartオブジェクトにアクセスするために使用できます。
chart1.redraw();
@eloの答えは正しく、賛成ですが、明確にするために少し整理する必要がありました。
const myChartEl = document.getElementById('the-id-name');
const myChart = Highcharts.charts[myChartEl.getAttribute('data-highcharts-chart')];
myChart次に、でレンダリングされたチャートに存在する現在のすべての小道具を公開するライブHighchartsオブジェクトになりmyChartElます。ためmyChartであるHighchartsオブジェクト、1缶鎖プロトタイプ方法は右のそれの後に、それを拡張したり、それを参照します。
myChart.getTable();
myChart.downloadXLS();
setTimeout(() => Highcharts.fireEvent(myChart, "redraw"), 10);
プラグインである、をmyChart通過することもできます。.highcharts()jQuery
var myChart = $("#the-id-name").highcharts();
上記のjQueryプラグインアプローチでjQueryは、プラグインを使用する前に、そしてもちろんプラグイン自体をロードする必要があります。このプラグインがなかったため、純粋なバニラJavaScriptで同じことを実現する別の方法を探すようになりました。
純粋なJSアプローチを使用することで、以下に依存することなく、必要なこと（2番目のコードスニペット）を実行できましたjQuery。