質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

1490閲覧

ccchartを出力したい

RyoM

総合スコア90

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2016/11/20 10:05

###前提・実現したいこと
ajax通信で取得したjsonデータを利用し、ccchartで円グラフを出力したいのですが
流れとしてhtml(この部分にjsファイルのソースを記述)のボタンをクリック→ajaxでjsonデータを取得(ここにはconfigとdeta部分が記述)。それと同時にpjaxで円グラフを出力する部分を書き換えたい。
以上が実現したいことです。
お分かりの方がいらっしゃればお力を貸していただけると非常に助かります。
よろしくお願いいたします。

###発生している問題・エラーメッセージ
jsのソースをメインのhtmlファイルに記述しても、読み込んでくれない
pjaxで書き換えるdiv部分(別のhtmlファイル)に性的なjsファイルのソースコードを記述するとそれは出力される。
どの部分にjsファイルのソースを記述すればいいのかが分かりません。

###index.jsp

html

1<%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 4<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 5<%@ page session="true" %> 6<!DOCTYPE html> 7<html> 8<head> 9<meta charset="UTF-8"> 10<title>総合ページ</title> 11<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/css/drawer.min.css"> 12<link rel="stylesheet" type="text/css" href="http://localhost:8080/PosSystem/basic_css/basic.css"> 13<link rel="stylesheet" type="text/css" href="http://localhost:8080/PosSystem/basic_css/header.css"> 14<link rel="stylesheet" type="text/css" href="http://localhost:8080/PosSystem/basic_css/footer.css"> 15<link rel="stylesheet" type="text/css" href="http://localhost:8080/PosSystem/retail_css/index.css"> 16<link rel="stylesheet" type="text/css" href="http://localhost:8080/PosSystem/retail_css/menu.css"> 17<link rel="stylesheet" type="text/css" href="http://localhost:8080/PosSystem/retail_css/example.css"> 18<link rel="stylesheet" type="text/css" href="http://localhost:8080/PosSystem/retail_css/analisis.css" > 19<link rel="stylesheet" type="text/css" href="http://localhost:8080/PosSystem/retail_css/marketing.css"> 20<% 21 String login = request.getRequestURI(); 22 session.setAttribute("loginuri", login); 23%> 24</head> 25<body class="drawer drawer--left"> 26 27<DIV id="wrapper"> 28 <DIV id="header"><!-- ヘッダー部分 --> 29 <jsp:include page="/common/header.jsp" /> 30 </DIV> 31 32 <DIV id="menu"><!-- メニュー部分 --> 33 <jsp:include page="menu.jsp" /> 34 </DIV> 35 36 <DIV id="main"><!-- 中身。動的に変わる --> 37 <jsp:include page="example.jsp" /> 38 </DIV> 39 40 <div id="footer"><!-- フッター部分 --> 41 <jsp:include page="/common/footer.jsp" /> 42 </div> 43</DIV> 44<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 45<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/js/drawer.min.js"></script> 46<script src="https://cdn.rawgit.com/ungki/bootstrap.dropdown/3.3.5/dropdown.min.js"></script> 47<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script> 48<script type="text/javascript" src="http://localhost:8080/PosSystem/js/ccchart-min.js"></script> 49<script type="text/javascript" src="http://localhost:8080/PosSystem/js/menu.js"></script> 50<script type="text/javascript" src="http://localhost:8080/PosSystem/js/jquery.pjax.js"></script> 51<script type="text/javascript" src="http://localhost:8080/PosSystem/js/analysisAjax.js"></script> 52<script type="text/javascript" src="http://localhost:8080/PosSystem/js/menuPjax.js"></script> 53</body> 54</html>

###menu.jsp

html

1<%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!-- ハンバーガーボタン --> 4<button type="button" class="drawer-toggle drawer-hamburger"> 5 <span class="sr-only">toggle navigation</span> 6 <span class="drawer-hamburger-icon"></span> 7</button> 8 9<nav class="drawer-nav"> 10 <ul class="drawer-menu"> 11 <!-- ドロワーメニューの中身 --> 12 <li class="drawer-dropdown"> 13 <a data-toggle="dropdown"><INPUT class="button" id="analysis" type="button" value="分析"></a> 14 <ul class="drawer-dropdown-menu"> 15 <li><INPUT id="marketing-analisis" class="button2" type="button" value="リキュール別売上分析(円)"></li> 16 <li><INPUT id="marketing-analisis-product" class="button2" type="button" value="商品別売上分析(棒)"></li> 17 <li><INPUT id="sales-analisis" class="button2" type="button" value="販売分析(線)"></li> 18 </ul> 19 </li> 20 <li class="drawer-dropdown"> 21 <a data-toggle="dropdown"><INPUT class="button" type="button" value="管理"></a> 22 <ul class="drawer-dropdown-menu"> 23 <li><INPUT id="ordering-management" class="button2" type="button" value="発注管理"></li> 24 <li><INPUT id="inventory-management" class="button2" type="button" value="在庫管理"></li> 25 <li><INPUT id="daily-report-management" class="button2" type="button" value="日報管理"></li> 26 <li><INPUT id="sales-management" class="button2" type="button" value="売上管理"></li> 27 </ul> 28 </li> 29 <li class="drawer-dropdown"> 30 <a data-toggle="dropdown"><INPUT class="button" type="button" value="登録"></a> 31 <ul class="drawer-dropdown-menu"> 32 <li><INPUT id="goods-register" class="button2" type="button" value="商品登録"></li> 33 <li><INPUT id="goods-update" class="button2" type="button" value="商品情報変更"></li> 34 <li><INPUT id="sales-register" class="button2" type="button" value="売上登録"></li> 35 </ul> 36 </li> 37 <li class="drawer-dropdown"> 38 <a data-toggle="dropdown"><INPUT class="button" type="button" value="その他"></a> 39 <ul class="drawer-dropdown-menu"> 40 <li><INPUT id="user_info" class="button2" type="button" value="ユーザー情報"></li> 41 <li><INPUT id="others" class="button2" type="button" value="その他設定"></li> 42 </ul> 43 </li> 44 </ul> 45</nav> 46 47

###円グラフを出力するjspファイル

html

1<%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3<title>販売分析ページ</title> 4 <DIV id="contents"> 5 <H1>販売分析ページ</H1> 6 <DIV id="analysis"> 7 <DIV id="kind-button"> 8 <INPUT id="sex" class="button5" type="button" value="性別"></INPUT> 9 <INPUT id="age" class="button5" type="button" value="年代別"></INPUT> 10 <INPUT id="price" class="button5" type="button" value="単価別"></INPUT> 11 <INPUT id="wine" class="button5" type="button" value="ワイン色別"></INPUT> 12 </DIV> 13 <DIV id="analysis-chart"> 14 <canvas id="chart_pie"></canvas> 15 <script type="text/javascript" src="http://localhost:8080/PosSystem/js/pie.js"></script> 16 </DIV> 17 <DIV id="detailDiv">detailDiv</DIV> 18 <DIV id="recommend">recommend</DIV> 19 <DIV id="orderDiv">orderDiv</DIV> 20 </DIV> 21 22 </DIV> 23

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

akio221

2016/11/21 00:22

JS側のソースが知りたいですね。jsの実行タイミング、readyをつけずに、DOM要素読み込み前に実行していませんか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問