4

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

よろしくお願いいたします。

0

1 件の回答 1

3

Chartというオブジェクトを初期化する際、canvasという要素のoffsetWidthoffsetHeightが必要ですが、pagebeforeshowというイベントが引き起こされる時にはjQuery Mobileのスタイルによってdisplaynoneなので、ブラウザはoffsetWidthoffsetHeightを計算できません。

ですから、pagebeforeshowpageshowに置き換えると、正しく動くと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。