如何将FusionChart集成到使用MVVM架构Durandal和Knockout.js开发的SPA应用程序中?我已经创建了一个带有硬编码数据的简单HTML文件,该文件中的图表运行良好,但是我无法弄清楚如何将此代码嵌入SPA应用程序。
我分享一些细节:
我在我的HTML文件中添加了以下Js文件:
<script type="text/javascript" src="./FusionCharts.js"></script>
<script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./lib.js"></script>
成功显示融合图的HTML文件代码如下:
<div id="chartdiv" align="center">Chart will load here</div>
<script type="text/javascript">
var chart = new FusionCharts("Column3D", "myChartId", "300", "200");
chart.setXMLData("<chart animation='0' caption='Aging' numberPrefix='$' showBorder='1'>" +
"<set label='Current' value='24000' color='00FF00' />" +
"<set label='30+' value='19600' color='0000FF' />" +
"<set label='60+' value='15700' color='FFFF00'/>" +
"<set label='90+' value='14400' color='FF0000' />" +
"<styles>" +
"<definition>" +
"<style name='myCaptionFont' type='font' align='right'/>" +
"</definition>" +
"<application>" +
"<apply toObject='Caption' styles='myCaptionFont' />" +
"</application>" +
"</styles> " +
"</chart>");
chart.render("chartdiv");
</script>
我无法弄清楚ViewModel.js和view.html文件中呈现FusionChart的代码应该是什么。
请帮忙。
我开发了一个工作演示,将FusionCharts包含在DurandalJS中。只需将项目复制到Web服务器并访问该应用程序即可。
首先要包括Fusioncharts.js,可以使用requirejs或直接将其添加到索引文件中来完成。为避免创建重复的图表,我们将检查FusionCharts('myChartId')是否存在并避免重绘。
您的视图模型将如下所示:
define(['durandal/http', 'durandal/app'], function() {
return {
displayText: 'FusionCharts in a SPA app!',
viewAttached: function(view) {
if (typeof FusionCharts('myChartId') === 'undefined') {
$('#binder').append('<div id="chartContainer"></div>');
var myChart = new FusionCharts("Column3D", "myChartId", "400", "300", "0");
myChart.setXMLData("<chart animation='0' caption='Aging' numberPrefix='$' showBorder='1'>" +
"<set label='Current' value='24000' color='00FF00' />" +
"<set label='30+' value='19600' color='0000FF' />" +
"<set label='60+' value='15700' color='FFFF00'/>" +
"<set label='90+' value='14400' color='FF0000' />" +
"</chart>");
myChart.render("chartContainer");
}
}
};
});
您的视图将显示在哪里
<h2 data-bind="html:displayText"></h2>
<div id="binder"></div>
main.js是引导文件,您可以在其中添加路由器(用于导航)。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句