Khi tôi hiển thị biểu đồ highcharts đến vùng chứa div, làm cách nào để có thể truy cập vào đối tượng biểu đồ thông qua vùng chứa div? tôi không muốn biến biểu đồ trở nên toàn cầu.
var chart = new Highcharts.Chart({
chart: {
renderTo: "testDivId",
...
Tôi muốn truy cập biểu đồ bên ngoài ngữ cảnh ở trên như thế này (mã giả), để gọi các hàm:
var chart = Highcharts.Chart("testDivId"); //access from id
chart.redraw();
Câu trả lời:
Người dùng có thể sử dụng plugin highcharts
var chart=$("#container").highcharts();
Đọc từ mảng Highcharts.charts , cho phiên bản 2.3.4 trở lên, chỉ mục của biểu đồ có thể được tìm thấy từ dữ liệu trên<div>
var index=$("#container").data('highchartsChart');
var chart=Highcharts.charts[index];
Theo dõi biểu đồ trong một đối tượng / bản đồ toàn cầu theo id vùng chứa
var window.charts={};
function foo(){
new Highcharts.Chart({...},function(chart){
window.charts[chart.options.chart.renderTo] = chart;
});
}
function bar(){
var chart=window.charts["containerId"];
}
Đọc chế độ @ Highcharts Mẹo - Truy cập đối tượng biểu đồ từ ID vùng chứa
Một số bổ sung đã được thực hiện trong các phiên bản mới hơn của Highcharts kể từ khi viết câu trả lời này và đã được lấy từ các câu trả lời từ @davertron, @Moes và @Przy, vui lòng ủng hộ nhận xét / câu trả lời của họ vì họ xứng đáng được ghi nhận . Thêm chúng ở đây vì câu trả lời được chấp nhận này sẽ không đầy đủ nếu không có những
$("#testDivId").highcharts({...}, function(chart) {...});
Tôi đã tìm thấy một cách khác để làm điều đó ... chủ yếu là vì tôi đang sử dụng Highcharts được nhúng trong OutSystems Platform và tôi không có cách nào để kiểm soát cách biểu đồ được tạo.
Cách mà tôi tìm thấy như sau:
Cung cấp một lớp nhận dạng cho biểu đồ bằng cách sử dụng classNamethuộc tính
chart: {
className: 'LifeCycleMasterChart'
}
Xác định một chức năng phụ trợ để lấy biểu đồ theo tên lớp
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;
}
Sử dụng chức năng phụ trợ bất cứ nơi nào bạn cần
var detailChart = getChartReferenceByClassName('LifeCycleDetailChart');
Hy vọng nó sẽ giúp bạn!
Không có jQuery (vani 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 là toàn cục nên bạn có thể sử dụng để truy cập vào đối tượng de highchart không quan trọng dù vùng chứa là
chart1.redraw();
... và với sự giúp đỡ của đồng nghiệp ... cách tốt hơn để làm điều đó là ...
getChartReferenceByClassName(className) {
var foundChart = $('.' + className + '').eq(0).parent().highcharts();
return foundChart;
}
Câu trả lời của @elo là đúng và được ủng hộ , mặc dù tôi phải chỉnh sửa lại một chút để làm rõ ràng hơn:
const myChartEl = document.getElementById('the-id-name');
const myChart = Highcharts.charts[myChartEl.getAttribute('data-highcharts-chart')];
myChartsau đó trở thành một đối tượng Highcharts trực tiếp hiển thị tất cả các đạo cụ hiện tại có trong biểu đồ được hiển thị trong myChartEl. Vì myChartlà một đối tượng Highcharts , người ta có thể chuỗi các phương thức nguyên mẫu ngay sau nó, mở rộng nó hoặc tham chiếu đến nó.
myChart.getTable();
myChart.downloadXLS();
setTimeout(() => Highcharts.fireEvent(myChart, "redraw"), 10);
Người ta cũng có thể myChartvượt qua .highcharts(), đó là một jQueryplugin:
var myChart = $("#the-id-name").highcharts();
Phương pháp tiếp cận jQueryplugin ở trên yêu cầu jQueryphải được tải trước khi sử dụng plugin và tất nhiên là chính plugin đó. Chính sự vắng mặt của plugin này đã khiến tôi phải tìm cách thay thế để hoàn thành điều tương tự với JavaScript vani thuần túy.
Bằng cách sử dụng phương pháp JS thuần túy, tôi đã có thể làm những gì tôi cần (đoạn mã thứ hai) mà không cần phải dựa vàojQuery :