Chart.jsを使って円グラフ(Doughnut)を表示させようとしています。
Web画面にボタンを表示し、ボタンを押すとダイアログ表示され、そのダイアログ上で円グラフを表示しようとしていますが、ダイアログは表示されるのですが円グラフが表示されません。
new Chartの部分がうまく働いていないようなのですが、原因が不明です。
環境は、Node.js 0.12.1, express 4.12.1, jquery 2.1.4, jquery mobile 1.4.5, chart.js 1.0.2を使っています。
ソースコードは下記のとおりです。
public/javascripts/script.js
$(document).on('pagebeforeshow', '#view-time', function (e, data) {
var chartData =
[
{
value: 10,
color: '#FF0000',
label: 'Red'
},
{
value: 20,
color: '#00FF00',
label: 'Green'
},
{
value: 30,
color: '#0000FF',
label: 'Blue'
}
];
// canvasは取得できていることは確認済み。
var ctx = $("#chart-view").get(0).getContext("2d");
// ここがうまく働いていない様子。
var chartview = new Chart(ctx).Doughnut(chartData);
});
layout.jade
doctype html
html
head
meta(charset='UTF-8')
meta(name='viewport', content='width=device-width, initial-scale=1')
title= title
link(rel='stylesheet', href='/stylesheets/jquery.mobile-1.4.5.min.css')
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='/javascripts/jquery-2.1.4.min.js')
script(src='/javascripts/jquery.mobile-1.4.5.min.js')
script(src='/javascripts/Chart.min.js')
script(src='/javascripts/script.js')
body
block content
index.jade
extends layout
block content
#index(data-role='page')
〜〜〜
#view-time(data-role='dialog')
.header(data-role='header')
h1 Dialog
div(data-role='content')
canvas#chart-view(height='300', width='300')
a(href='#', data-rel='back', data-role='button') Close
よろしくお願いいたします。