Mit chart.update auf einem Diagramm mit renderTo

Question

Ich erkläre eine highcart Funktion lokal:

function render(){ 
    var Chart=null 
    Chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: container, 
      height: 400 
     }, 
     title: { 
      text: 'Chart.update' 
     }, 

     subtitle: { 
      text: 'Plain' 
     }, 

     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     series: [{ 
      type: 'column', 
      colorByPoint: true, 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
      showInLegend: false 
     }] 
    }); 
} 

Angenommen ich das machen nicht verändern() Funktion, bin ich in der Lage, die chart.update-Tool zu verwenden, um die Eigenschaften zu ändern ?

Grundsätzlich möchte ich die Funktionalität here, aber für this example ohne Änderung der Funktion neu erstellen.

Ist das wie eine Abfrage auf eine lokale Variable außerhalb der Funktion oder ist sie irgendwo noch global definiert?

Answer 1

müssen Sie var chart=null bei betteln vor der render Funktion

Fiddle

Js

var chart = null 
function render() { 
    chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: container, 
     height: 400 
    }, 
    title: { 
     text: 'Chart.update' 
    }, 

    subtitle: { 
     text: 'Plain' 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    series: [{ 
     type: 'column', 
     colorByPoint: true, 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
     showInLegend: false 
    }] 
    }); 
} 
render() 

function plain() { 
    chart.update({ 
    chart: { 
     inverted: false, 
     polar: false 
    }, 
    subtitle: { 
     text: 'Plain' 
    } 
    }); 
} 

function inverted() { 
    chart.update({ 
    chart: { 
     inverted: true, 
     polar: false 
    }, 
    subtitle: { 
     text: 'Inverted' 
    } 
    }); 
} 

function polar() { 
    chart.update({ 
    chart: { 
     inverted: false, 
     polar: true 
    }, 
    subtitle: { 
     text: 'Polar' 
    } 
    }); 
} 

Html

<div id="container"></div> 
<button id="plain" class="autocompare" onclick="plain()">Plain</button> 
<button id="inverted" class="autocompare" onclick="inverted()">Inverted</button> 
<button id="polar" class="autocompare" onclick="polar()">Polar</button> 

definieren