15161


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

[code]

    $(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);     
    });
    
[/code]

layout.jade

[code]

    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
    
[/code]

index.jade

[code]

    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
    
[/code]

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


CC BY-SA 3.0
2015-08-27T14:16:49.823
14912
2019-09-09T15:06:20.320
2019-09-09T15:06:20.320
32986
10683
question
jquery node.js jquery-mobile chart.js
Chart.jsで円グラフが表示できない


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

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


CC BY-SA 3.0
2015-09-03T00:00:13.980
15161
2015-09-03T00:52:17.590
2015-09-03T00:52:17.590
5519
11003
14912
answer