Question

我试图在Phonegap项目中使用jqPlot在Onsen UI中绘制图表，但我无法做到。我使用纯javascript，没有AngularJS。 jqPlot与HTML5兼容，所以我认为Phonegap / Onsen UI兼容。

请参阅page1.html，其中有javascript行显示图表。

可能是模板问题，或者Onsen UI不能包含这种类型的代码，但我认为这是可能的。有任何想法吗？谢谢！

我试试这个：

＆＃13;

<!doctype html>
<html lang="en" ng-app="app">

<head>
	<meta charset="utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">
	<title>My App</title>

	<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
	<link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css">
	<link rel="stylesheet" href="styles/app.css" />

	<script src="lib/onsen/js/angular/angular.js"></script>
	<script src="lib/onsen/js/onsenui.js"></script>

	<script type="text/javascript" src="lib/jqplot/jquery.min.js"></script>
	<script type="text/javascript" src="lib/jqplot/plugins/jqplot.highlighter.min.js"></script>
	<script type="text/javascript" src="lib/jqplot/plugins/jqplot.cursor.min.js"></script>
	<script type="text/javascript" src="lib/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>

	<script type="text/javascript" src="lib/jqplot/jquery.jqplot.min.js"></script>
	<script type="text/javascript" src="lib/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
	<script type="text/javascript" src="lib/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
	<link rel="stylesheet" type="text/css" href="lib/jqplot/jquery.jqplot.min.css" />

	<script>
		ons.bootstrap();

		ons.ready(function () {
		});
	</script>
</head>
<body>

	<ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left" var="menu" type="reveal" max-slide-distance="260px" swipable="true">
	</ons-sliding-menu>

	<ons-template id="menu.html">
		<ons-page modifier="menu-page">
			<ons-toolbar modifier="transparent"></ons-toolbar>

			<ons-list class="menu-list">
				<ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
					<ons-icon icon="fa-plus"></ons-icon>
					Facturación Anual
				</ons-list-item>

				<ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
					<ons-icon icon="fa-bookmark"></ons-icon>
					Ranking Productos
				</ons-list-item>
			</ons-list>
		</ons-page>
	</ons-template>


	<ons-template id="page1.html">
		<ons-page id="canvasPage">
			<ons-toolbar>
				<div class="left">
					<ons-toolbar-button ng-click="menu.toggle()">
						<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
					</ons-toolbar-button>
				</div>
				<div class="center">Page 111</div>
			</ons-toolbar>

				<div style="width:30%">
					<div>
						<script>
							ons.ready(function () {
								var plot1 = $.jqplot('chart1', [[3, 7, 9, 1, 5, 3, 8, 2, 5]]);
							});
						</script>
					</div>
				</div>
		</ons-page>
	</ons-template>

	<ons-template id="page2.html">
		<ons-page>
			<ons-toolbar>
				<div class="left">
					<ons-toolbar-button ng-click="menu.toggle()">
						<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
					</ons-toolbar-button>
				</div>
				<div class="center">Page 222</div>
			</ons-toolbar>
		</ons-page>
	</ons-template>
</body>
</html>

＆＃13;

Answer 1

我认为JavaScript甚至不会被执行。使用console.log(msg)检查很容易。

您已在<ons-template>标记内放置了一些JavaScript代码。当您导航到页面时，它将被插入到DOM中，但JavaScript将不会被执行。

您不应将JavaScript内联到HTML中，请查看如何正确构建JavaScript。

在Phonegap项目中使用Onsen UI中的jqPlot

1 个答案: