0
Phonegap 프로젝트에서 jqPlot을 사용하여 Onsen UI에서 차트를 그려보고 싶지만 그럴 수 없습니다. 나는 순수한 자바 스크립트를 사용하며 AngularJS는 사용하지 않습니다. jqPlot은 HTML5와 호환되므로 Phonegap/Onsen UI 호환이 가능하다고 생각합니다.Phonegap 프로젝트의 Onsen UI에서 jqPlot 사용
page1.html을 참조하십시오. 차트를 표시하는 자바 스크립트 행이 있습니다.
템플릿 문제 일 수 있으며, 또는 Onsen UI에이 유형의 코드를 포함 할 수 없지만 가능하다고 생각합니다. 아이디어가 있으십니까? 감사합니다.
나는 이것을 시도 :<!doctype html>
<html lang="en" ng-app="app">
<head>
\t <meta charset="utf-8">
\t <meta name="apple-mobile-web-app-capable" content="yes">
\t <meta name="mobile-web-app-capable" content="yes">
\t <title>My App</title>
\t <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
\t <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css">
\t <link rel="stylesheet" href="styles/app.css" />
\t <script src="lib/onsen/js/angular/angular.js"></script>
\t <script src="lib/onsen/js/onsenui.js"></script>
\t <script type="text/javascript" src="lib/jqplot/jquery.min.js"></script>
\t <script type="text/javascript" src="lib/jqplot/plugins/jqplot.highlighter.min.js"></script>
\t <script type="text/javascript" src="lib/jqplot/plugins/jqplot.cursor.min.js"></script>
\t <script type="text/javascript" src="lib/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
\t <script type="text/javascript" src="lib/jqplot/jquery.jqplot.min.js"></script>
\t <script type="text/javascript" src="lib/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
\t <script type="text/javascript" src="lib/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
\t <link rel="stylesheet" type="text/css" href="lib/jqplot/jquery.jqplot.min.css" />
\t <script>
\t \t ons.bootstrap();
\t \t ons.ready(function() {
\t \t });
\t </script>
</head>
<body>
\t <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left" var="menu" type="reveal" max-slide-distance="260px" swipable="true">
\t </ons-sliding-menu>
\t <ons-template id="menu.html">
\t \t <ons-page modifier="menu-page">
\t \t \t <ons-toolbar modifier="transparent"></ons-toolbar>
\t \t \t <ons-list class="menu-list">
\t \t \t \t <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
\t \t \t \t \t <ons-icon icon="fa-plus"></ons-icon>
\t \t \t \t \t Facturación Anual
\t \t \t \t </ons-list-item>
\t \t \t \t <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
\t \t \t \t \t <ons-icon icon="fa-bookmark"></ons-icon>
\t \t \t \t \t Ranking Productos
\t \t \t \t </ons-list-item>
\t \t \t </ons-list>
\t \t </ons-page>
\t </ons-template>
\t <ons-template id="page1.html">
\t \t <ons-page id="canvasPage">
\t \t \t <ons-toolbar>
\t \t \t \t <div class="left">
\t \t \t \t \t <ons-toolbar-button ng-click="menu.toggle()">
\t \t \t \t \t \t <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
\t \t \t \t \t </ons-toolbar-button>
\t \t \t \t </div>
\t \t \t \t <div class="center">Page 111</div>
\t \t \t </ons-toolbar>
\t \t \t \t <div style="width:30%">
\t \t \t \t \t <div>
\t \t \t \t \t \t <script>
\t \t \t \t \t \t \t ons.ready(function() {
\t \t \t \t \t \t \t \t var plot1 = $.jqplot('chart1', [[3, 7, 9, 1, 5, 3, 8, 2, 5]]);
\t \t \t \t \t \t \t });
\t \t \t \t \t \t </script>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t </ons-page>
\t </ons-template>
\t <ons-template id="page2.html">
\t \t <ons-page>
\t \t \t <ons-toolbar>
\t \t \t \t <div class="left">
\t \t \t \t \t <ons-toolbar-button ng-click="menu.toggle()">
\t \t \t \t \t \t <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
\t \t \t \t \t </ons-toolbar-button>
\t \t \t \t </div>
\t \t \t \t <div class="center">Page 222</div>
\t \t \t </ons-toolbar>
\t \t </ons-page>
\t </ons-template>
</body>
</html>
안녕하세요. 답변에 대한 답변입니다. 자바 스크립트 코드를 넣어야하는 ons-sliding-menu를 사용하고 있습니까? 감사합니다 !!! – mneu