Asp.net mvc 4 Durandal/热毛巾模板中未呈现Highcharts的问题

我们在ASP.NET MVC 4的Durandal/Hot Tobber模板中使用HighCharts.js。我们只是展示了在仪表板页面中使用图表API的概念证明。但是，在页面加载期间，图形不会在页面上呈现

我们有一个自定义的.js文件，其中包含以下代码（从HighCharts.com复制和粘贴）：

以及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>

然而，图形并没有呈现。使用上面列出的脚本，我已经能够在引导应用程序中成功地呈现图形

为了在单页应用程序上使用document.ready语句中的函数，是否必须执行额外的步骤

---

提前感谢

在典型的Durandal应用程序中，不需要使用document ready，因为此时只呈现了index.html（

applicationHost

）的内容。其他所有内容都通过使用Durandal注入DOM

为了处理这些合成的DOM片段，在伴随html视图的vm中添加回调

viewAttached

获取作为参数传入的合成视图，该参数应用于限制jQuery选择器

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

---

在大多数情况下，这应该足以让jQuery插件工作。然而，在Durandal 1.2

viewAttached

中，只确保合成片段附加到其父元素，而不必附加到DOM，因此您必须检查这是否足以使highcharts正常工作。这个问题将在即将推出的Durandal 2.0中通过引入回调来解决。

在典型的Durandal应用程序中，不需要使用document ready，因为此时只呈现了index.html（

applicationHost

）的内容。其他所有内容都通过使用Durandal注入DOM

为了处理这些合成的DOM片段，在伴随html视图的vm中添加回调

viewAttached

获取作为参数传入的合成视图，该参数应用于限制jQuery选择器

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

---

在大多数情况下，这应该足以让jQuery插件工作。然而，在Durandal 1.2

viewAttached

中，只确保合成片段附加到其父元素，而不必附加到DOM，因此您必须检查这是否足以使highcharts正常工作。这个问题将在即将发布的Durandal 2.0中通过引入回调来解决。

RainerAtSpirit-感谢您的快速响应。您是对的，我们在函数viewAttached（view）{}调用中实现了调用，并且成功地运行了。@如果highcharts元素需要使用新的数据源刷新，该怎么办？例如，我的视图中有一些下拉列表，显示根据选择重新加载图表的力。非常感谢。RainerAtSpirit-感谢您的快速响应。您是对的，我们在函数viewAttached（view）{}调用中实现了调用，并且成功地运行了。@如果highcharts元素需要使用新的数据源刷新，该怎么办？例如，我的视图中有一些下拉列表，显示根据选择重新加载图表的力。非常感谢。

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