Highcharts抛出容器未找到错误但容器存在

Question

我只是将高级图表连接起来用于我的应用程序，我正在使用： knockout 3.0 ， require.js 2.1 ， bootstrap 3.0 < / strong>， jquery 2.1 。我在require.config文件中连接了高图表，如下所示：

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 在此vm的父级中完成。这是我的html模板，它很漂亮，里面有一个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/errors/13 ** 任何帮助将不胜感激。谢谢。

Answer 1

好的，谢谢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>

自定义绑定使得vm的代码在加载div后触发。