Я пытаюсь нарисовать диаграмму в пользовательском интерфейсе Onsen, используя jqPlot в проекте Phonegap, но не могу. Я использую чистый javascript, без AngularJS. jqPlot совместим с HTML5, поэтому я думаю, что он совместим с Phonegap/Onsen UI.
См. page1.html, есть строки javascript, чтобы показать диаграмму.
Возможно, это проблема шаблона, или пользовательский интерфейс Onsen не может содержать этот тип кода, но я думаю, что это возможно. Любые идеи? Спасибо!!
Я пробую это:
<!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>