JavaScript函數中的HighCharts

我想在用戶從服務器中選擇一些數據後繪製一個3d框。JavaScript函數中的HighCharts

當我把一個js函數放入highcharts時，它會拋出一些錯誤。

我的代碼是：

<a href="#" onclick="chart3d();">Chart It</a><br/> 

<div id="container" style="height: 400px"></div> 
<script> 
var chart; 

function chart3d() { 

    // 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')] 
      ] 
     }; 
    }); 

    // Set up the chart 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      margin: 100, 
      type: 'scatter', 
      options3d: { 
       enabled: true, 
       alpha: 10, 
       beta: 30, 
       depth: 250, 
       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: [{ 
      planeProjection: { 
       enabled: false, 
      }, 
      lineProjection: { 
       enabled: 'hover', 
       colorByPoint: true 
      }, 
      name: 'Reading', 
      colorByPoint: true, 
      data: darray 
     }] 
    }); 


    // Add mouse events for rotation 
    $(chart.container).on('mousedown.hc touchstart.hc', function (eStart) { 
     eStart = chart.pointer.normalize(eStart); 

     var posX = eStart.pageX, 
      posY = eStart.pageY, 
      alpha = chart.options.chart.options3d.alpha, 
      beta = chart.options.chart.options3d.beta, 
      newAlpha, 
      newBeta, 
      sensitivity = 5; // lower is more sensitive 

     $(document).on({ 
      'mousemove.hc touchdrag.hc': function (e) { 
       // Run beta 
       newBeta = beta + (posX - e.pageX)/sensitivity; 
       chart.options.chart.options3d.beta = newBeta; 

       // Run alpha 
       newAlpha = alpha + (e.pageY - posY)/sensitivity; 
       chart.options.chart.options3d.alpha = newAlpha; 

       chart.redraw(false); 
      }, 
      'mouseup touchend': function() { 
       $(document).off('.hc'); 
      } 
     }); 
    }); 


} 

</script>

這將加載很好，如果我不把它chart3d函數內。有沒有辦法讓這個工作。該錯誤消息我得到的是：

highcharts.js:10 Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13 
    at Object.a.error (highcharts.js:10) 
    at a.Chart.getContainer (highcharts.js:256) 
    at a.Chart.firstRender (highcharts.js:271) 
    at a.Chart.init (highcharts.js:247) 
    at a.Chart.getArgs (highcharts.js:246) 
    at new a.Chart (highcharts.js:246) 
    at chart3d (graphingCustom.js:26) 
    at HTMLAnchorElement.onclick (VM599 :643)

來源

2017-07-03 Zee Fer

將代碼封裝在$（document）.ready（function（）{... code goes here ...}）; – mkaatman

可能重複[Highcharts錯誤＃13，同時在ajax調用上實例化高位圖表]（https://stackoverflow.com/questions/13112652/highcharts-error-13-while-instantiating-highchart-on-ajax-call） –

Are you確定你沒有其他任何東西（比如測試電話），它正在開啓你的chart3d功能。你可以去舊學校，只是查看網頁源代碼，並搜索該函數調用，以確保你只是調用onclick？在小提琴手中工作正常（我嘲笑你的數據）https://jsfiddle.net/km0gjjez/1/ –

正如他們所說：

Highcharts錯誤＃13

渲染DIV沒有找到

會出現此錯誤，如果chart.renderTo選項配置錯誤使 Highcharts無法找到HTML元素來渲染圖表。

您在調用方法時沒有與id=container的div。

來源

2017-07-04 00:01:53 bluehipy

JavaScript函數中的HighCharts

回答

相關問題