Redraw Problem in Highcharts 3D Scatter Chart

Question

Hier arbeite ich an Highcharts 3D Scatter Diagramm, basierend auf der Probe jsfiddle. In der Geige habe ich das Diagramm neu gezeichnet, während das div geleert wurde, das Diagramm enthält, Streupunkte werden entfernt, aber der 3D-Container wird nicht entfernt. Daher wird das Diagramm nicht neu gezeichnet.

JavaScript-Code:

var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'scatter', 
      width: 500, 
      height: 550, 
      marginTop:150, 
      margin: 100, 
      options3d: { 
       enabled: true, 
       drag: { 
         enabled: true, 
        flipAxes: true, 
        snap: 15, 
        animateSnap: true 
           }, 
       alpha: 15, 
       beta: 30, 
       depth: 300, 
       viewDistance: 5, 
       fitToPlot: false, 
       frame: { 
        bottom: { size: 1, color: 'rgba(0,0,0,0.02)' }, 
        back: { size: 1, color: 'rgba(0,0,0,0.04)' }, 
        side: { size: 1, color: 'rgba(0,0,0,0.06)' } 
       } 
      } 
     }, 
     title: { 
      text: 'Draggable box' 
     }, 
     subtitle: { 
      text: 'Click and drag the plot area to rotate in space' 
     }, 
     plotOptions: { 
      scatter: { 
       width: 10, 
       height: 10, 
       depth: 10 
      } 
     }, 
     yAxis: { 
      min: 0, 
      max: 10, 
      title: null 
     }, 
     xAxis: { 
      min: 0, 
      max: 10, 
      gridLineWidth: 1 
     }, 
     zAxis: { 
      min: 0, 
      max: 10, 
      showFirstLabel: false 
     }, 
     legend: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Reading', 
      colorByPoint: true, 
      data: [[1, 6, 5], [8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4], [2, 3, 3], [6, 9, 9], [0, 7, 0], [7, 7, 9], [7, 2, 9], [0, 6, 2], [4, 6, 7], [3, 7, 7], [0, 1, 7], [2, 8, 6], [2, 3, 7], [6, 4, 8], [3, 5, 9], [7, 9, 5], [3, 1, 7], [4, 4, 2], [3, 6, 2], [3, 1, 6], [6, 8, 5], [6, 6, 7], [4, 1, 1], [7, 2, 7], [7, 7, 0], [8, 8, 9], [9, 4, 1], [8, 3, 4], [9, 8, 9], [3, 5, 3], [0, 2, 4], [6, 0, 2], [2, 1, 3], [5, 8, 9], [2, 1, 1], [9, 7, 6], [3, 0, 2], [9, 9, 0], [3, 4, 8], [2, 6, 1], [8, 9, 2], [7, 6, 5], [6, 3, 1], [9, 3, 1], [8, 9, 3], [9, 1, 0], [3, 8, 7], [8, 0, 0], [4, 9, 7], [8, 6, 2], [4, 3, 0], [2, 3, 5], [9, 1, 4], [1, 1, 4], [6, 0, 2], [6, 1, 6], [3, 8, 8], [8, 8, 7], [5, 5, 0], [3, 9, 6], [5, 4, 3], [6, 8, 3], [0, 1, 5], [6, 7, 3], [8, 3, 2], [3, 8, 3], [2, 1, 6], [4, 6, 7], [8, 9, 9], [5, 4, 2], [6, 1, 3], [6, 9, 5], [4, 8, 2], [9, 7, 4], [5, 4, 2], [9, 6, 1], [2, 7, 3], [4, 5, 4], [6, 8, 1], [3, 4, 0], [2, 2, 6], [5, 1, 2], [9, 9, 7], [6, 9, 9], [8, 4, 3], [4, 1, 7], [6, 2, 5], [0, 4, 9], [3, 5, 9], [6, 9, 1], [1, 9, 2]] 
     }] 
    }); 

Bitte ein Verfahren vorschlagen, 3D-Punktdiagramm neu zu zeichnen.

Answer 1

Wenn Sie die Farbeinstellung außerhalb Ihrer Methode verschieben, wird Ihr Problem behoben. Weitere Informationen hierzu finden Sie hier: http://forum.highcharts.com/highcharts-usage/pie-char-uncaught-typeerror-a-indexof-is-not-a-function-t33161/

Ich bewegte auch Diagramm außerhalb der Methode, so dass destroy() könnte aufgerufen werden. Dies verhindert Speicherlecks.

var chart; 

// Give the points a 3D feel by adding a radial gradient 
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) { 
    return { 
     radialGradient: { 
      cx: 0.4, 
      cy: 0.3, 
      r: 0.5 
     }, 
     stops: [ 
      [0, color], 
      [1, Highcharts.Color(color).brighten(-0.2).get('rgb')] 
     ] 
    }; 
}); 

function scatterChart(Data) { 
    // Set up the chart 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'scatter', 
      width: 500, 
      height: 550, 
      marginTop:150, 
      margin: 100, 
      options3d: { 
       enabled: true, 
       drag: { 
         enabled: true, 
        flipAxes: true, 
        snap: 15, 
        animateSnap: true 
           }, 
       alpha: 15, 
       beta: 30, 
       depth: 300, 
       viewDistance: 5, 
       fitToPlot: false, 
       frame: { 
        bottom: { size: 1, color: 'rgba(0,0,0,0.02)' }, 
        back: { size: 1, color: 'rgba(0,0,0,0.04)' }, 
        side: { size: 1, color: 'rgba(0,0,0,0.06)' } 
       } 
      } 
     }, 
     title: { 
      text: 'Draggable box' 
     }, 
     subtitle: { 
      text: 'Click and drag the plot area to rotate in space' 
     }, 
     plotOptions: { 
      scatter: { 
       width: 10, 
       height: 10, 
       depth: 10 
      } 
     }, 
     yAxis: { 
      min: 0, 
      max: 10, 
      title: null 
     }, 
     xAxis: { 
      min: 0, 
      max: 10, 
      gridLineWidth: 1 
     }, 
     zAxis: { 
      min: 0, 
      max: 10, 
      showFirstLabel: false 
     }, 
     legend: { 
      enabled: false 
     }, 
     series:Data 
    }); 
} 

var scatterData = [{ 
      name: 'Reading', 
      colorByPoint: true, 
      data: [[1, 6, 5], [8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4], [2, 3, 3], [6, 9, 9], [0, 7, 0], [7, 7, 9], [7, 2, 9], [0, 6, 2], [4, 6, 7], [3, 7, 7], [0, 1, 7], [2, 8, 6], [2, 3, 7], [6, 4, 8], [3, 5, 9], [7, 9, 5], [3, 1, 7], [4, 4, 2], [3, 6, 2], [3, 1, 6], [6, 8, 5], [6, 6, 7], [4, 1, 1], [7, 2, 7], [7, 7, 0], [8, 8, 9], [9, 4, 1], [8, 3, 4], [9, 8, 9], [3, 5, 3], [0, 2, 4], [6, 0, 2], [2, 1, 3], [5, 8, 9], [2, 1, 1], [9, 7, 6], [3, 0, 2], [9, 9, 0], [3, 4, 8], [2, 6, 1], [8, 9, 2], [7, 6, 5], [6, 3, 1], [9, 3, 1], [8, 9, 3], [9, 1, 0], [3, 8, 7], [8, 0, 0], [4, 9, 7], [8, 6, 2], [4, 3, 0], [2, 3, 5], [9, 1, 4], [1, 1, 4], [6, 0, 2], [6, 1, 6], [3, 8, 8], [8, 8, 7], [5, 5, 0], [3, 9, 6], [5, 4, 3], [6, 8, 3], [0, 1, 5], [6, 7, 3], [8, 3, 2], [3, 8, 3], [2, 1, 6], [4, 6, 7], [8, 9, 9], [5, 4, 2], [6, 1, 3], [6, 9, 5], [4, 8, 2], [9, 7, 4], [5, 4, 2], [9, 6, 1], [2, 7, 3], [4, 5, 4], [6, 8, 1], [3, 4, 0], [2, 2, 6], [5, 1, 2], [9, 9, 7], [6, 9, 9], [8, 4, 3], [4, 1, 7], [6, 2, 5], [0, 4, 9], [3, 5, 9], [6, 9, 1], [1, 9, 2]] 
     }]; 

scatterChart(scatterData); 
chart.destroy(); 
scatterChart(scatterData);