ฉันจะเข้าถึงแผนภูมิ Highcharts ผ่าน DOM-Container ได้อย่างไร

Question 1

เมื่อฉันแสดงผลแผนภูมิสูงไปยังคอนเทนเนอร์ div ฉันจะเข้าถึงวัตถุแผนภูมิผ่าน div-Container ได้อย่างไร

ฉันไม่ต้องการให้ตัวแปรแผนภูมิเป็นแบบสากล

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

ฉันต้องการเข้าถึงแผนภูมินอกบริบทข้างต้นเช่นนี้ (pseudocode) เพื่อเรียกใช้ฟังก์ชัน:

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

Question 2

ไฮชาร์ต 3.0.1

ผู้ใช้สามารถใช้ปลั๊กอินไฮชาร์ต

var chart=$("#container").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"];
}

Read Mode @ Highcharts Tips - การเข้าถึงออบเจ็กต์แผนภูมิจาก ID คอนเทนเนอร์

ปล

มีการเพิ่มเติมบางส่วนใน Highcharts เวอร์ชันใหม่กว่าตั้งแต่เขียนคำตอบนี้และนำมาจากคำตอบจาก @davertron, @Moes และ @Przy โปรดเพิ่มคะแนนความคิดเห็น / คำตอบของพวกเขาเนื่องจากพวกเขาสมควรได้รับเครดิตสำหรับสิ่งเหล่านี้ การเพิ่มที่นี่เนื่องจากคำตอบที่ยอมรับนี้จะไม่สมบูรณ์หากไม่มีคำตอบเหล่านี้

Question 3

คุณสามารถทำได้

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

ตรวจสอบตัวอย่างเกี่ยวกับ fiddler

Question 4

var $chartCont = $('#container').highcharts({...}),
    chartObj = Highcharts.charts[$chartCont.data('highchartsChart')];

chartCont เป็นวัตถุ jQuery chartObj คือ Highchart Chart Object

นี่คือการใช้ Highcharts 3.01

Question 5

เพียงแค่ใช้ JS บริสุทธิ์:

var obj = document.getElementById('#container')
    Highcharts.charts[obj.getAttribute('data-highcharts-chart')];

Question 6

ฉันพบวิธีอื่นในการทำ ... ส่วนใหญ่เป็นเพราะฉันใช้ 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');
```

หวังว่ามันจะช่วยคุณได้!

Question 7

ไม่มี jQuery (วานิลลา js):

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

Question 8

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 ได้ไม่ว่าจะเป็นคอนเทนเนอร์

chart1.redraw();

Question 9

... และด้วยความช่วยเหลือจากเพื่อนร่วมงาน ... วิธีที่ดีกว่าคือ ...

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

    return foundChart;
}

Question 10

คำตอบของ@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 :