Highcharts扔容器没有发现错误，但容器中存在

我只是连接最多高图表与我的应用程序使用，我使用：淘汰赛3.0，require.js 2.1，引导3.0，jquery 2.1在里面。我已经在有线高图表在我require.config文件是这样的：Highcharts扔容器没有发现错误，但容器中存在

requirejs.config(
    baseUrl: 'thirdparty', 
    packages: [ 
     ...... 
     {name: 'Highcharts', location: 'highcharts', main: 'highcharts.js'} 
    ], 
    paths: { 
     'jquery': 'jquery/jquery', 
     'highcharts': 'highcharts/highcharts.exporting.module', 
     'highcharts-theme': 'highcharts/dark-blue', 
     'highcharts-module': 'highcharts/highcharts' 
    }, 
    shim: { 
     'highcharts-module': {exports: 'Highcharts', deps: ['jquery']}, 
     'highcharts-theme': ['highcharts-module'], 
     'highcharts': {deps: ['highcharts-module', 'highcharts-theme'], exports: 'Highcharts'} 
    } 
);

这是我的淘汰赛视图模型：

define(['jquery', 'knockout', 'Highcharts'], function($, ko){ 
    return function MyViewModel(){ 
     var self = this; 
     self.chartOptions = {.....} // copy pasted stuff from one of the examples 
     self.drawChart = function(){ 
      #("#container").highchart(self.chartOptions); 
     } 
     self.drawChart(); 
    } 
});

ko.applyBinds在这个虚拟机的母公司来完成。这是我的HTML模板，其prettymuch有一个div内的容器：

<div class="row"> 
<div class="col-md-10"> 
    <div class="well container"> 
     <div id="container"></div> 
    </div> 
</div> 
</div>

当我重新加载浏览器，我得到这个错误：

** Highcharts错误＃13：www.highcharts.com/错误/ 13 ** 任何帮助将不胜感激。谢谢。

来源

2014-03-05 vprasad

你有没有试过在self.drawChart（）设置断点？当调用drawChart时，容器可能不存在。 JSFiddle将有助于您诊断问题！ –

你是对的！当vm的代码运行时，div没有被加载。谢谢：） – vprasad

好的，感谢Esteban的建议，我能够弄清楚为什么在vm代码运行时div没有被加载。我通过添加一个自定义绑定处理程序来淘汰它。

ko.bindingHandlers.initHighCharts ={ 
     init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
      var val = ko.unwrap(valueAccessor()); 
      if(val.data){ 
       try { 
        $(element).highcharts(val.data); 
       } catch(e){ 
        console.log(e); 
       } 
      } 
     }, 
     update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 

     } 
    };

而在HTML模板做：

<div class="row"> 
<div class="col-md-10 no-margin"> 
    <div class="well container"> 
     <div data-bind="initHighCharts: {data: chartingOptions}"></div> 
    </div> 
</div> 
</div>

自定义绑定，使虚拟机的代码的DIV加载后开火。

来源

2014-03-05 00:48:47 vprasad

Highcharts扔容器没有发现错误，但容器中存在

回答

相关问题