问题与Highcharts在迪朗达尔/热毛巾模板不渲染(Issue with Highcharts

我们使用在ASP.NET MVC 4.迪朗达尔/热毛巾模板我们只是显示使用图表API用于仪表板页面概念证明HighCharts.js。 然而，图形不加载页面过程中显示在网页上。

我们有.js文件的自定义保存下面的代码（复制和粘贴HighCharts.com）：

$(document).ready(function () {
    $('#reportgraph').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

而在这被正确渲染HTML视图一个div：

<div class="row-fluid">
     <div class="span12">
          <div class="widget">
               <div class="widget-header">
                    <div class="title">Highcharts</div>
               </div>
               <div class="widget-body">
                    <div id="reportgraph" style="width:100%"></div>
               </div>
          </div>
     </div>
</div>

该脚本捆绑包含以下文件：

.Include("~/Scripts/jquery-1.9.1.min.js")
.Include("~/Scripts/highcharts.js")
.Include("~/Scripts/custom.js")
.Include("~/Scripts/bootstrap.js")
.Include("~/Scripts/knockout-{version}.debug.js")
.Include("~/Scripts/sammy-{version}.js")
.Include("~/Scripts/toastr.js")
.Include("~/Scripts/Q.js")
.Include("~/Scripts/breeze.debug.js")
.Include("~/Scripts/moment.js"));

然而，图表不会呈现。 我已经能够成功地渲染图形的引导程序，上面列出的脚本工作。

是否有必须在订单中的单页的应用程序与的document.ready语句中的功能的工作做一个额外的步骤？

提前致谢！

Answer 1:

在一个典型的应用迪朗达尔没有必要使用文档准备为在这一点上只有index.html的内容（ applicationHost ）已经呈现。 其他一切都被用Durandal的方式注入DOM 组成 。

为了与这些组成DOM片段工作添加viewAttached在随HTML视图中的虚拟机的回调。 viewAttached被传递作为参数所构成的视图，它应该被用来限制jQuery选择。

function viewAttached(view) {
    $('#reportgraph', view).highcharts({
        ...
    });
};

在大多数情况下，应该是足以让jQuery插件工作。 然而，在迪朗达尔1.2 viewAttached只是确保组成片段连接到不一定是DOM它的父元素，所以你必须要检查，如果这是足以让highcharts工作。 这个问题将在即将到来的迪朗达尔2.0通过引入解决documentAttached回调。

文章来源: Issue with Highcharts not rendering in Durandal/Hot Towel Template