23159


こんにちは

Onsen-UIとGoogle Chartsを利用してリスト形式で複数のグラフを表示しようとしていますが、うまく表示されません。  
リストの外に表示させたらうまく表示されたためリストの場合の書き方が悪いと思うのですが、原因やヒントをご存知の方いましたらご教授いただけないでしょうか。  
注)実際にはリストのラインごとに別のグラフを表示したいのですが現時点では簡易的に実験しているためすべて同じグラフが表示されればOKです。

index.html

[code]

    <html lang="en" ng-app="app" ng-csp>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    </head>
    
    <body ng-controller="AppController">
    
    <ons-template id="detail.html">
        <ons-page id="detail-page" ng-controller="detailController">
            <ons-list style="margin: -1px 0">
                <ons-list-item style="line-height: 10;" modifier="chevron" class="item" ng-repeat="item in itemTable">
                    <div id="chart_div"></div>
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-template>
    </body>
    </html>
    
[/code]

index.js

[code]

    $scope.init = function () {
        drawCharts();
    };
    $scope.init();
    
    function drawCharts(){
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'X');
        data.addColumn('number', 'Dogs');
    
        data.addRows([
            [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
            [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
            [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
            [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
            [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
            [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
            [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
            [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
            [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
            [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
            [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
            [66, 70], [67, 72], [68, 75], [69, 80]
        ]);
    
        var options = {
            hAxis: {
              title: 'Time'
            },
            vAxis: {
              title: 'Popularity'
            }
        };
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);   
    }
    
[/code]


CC BY-SA 3.0
2016-03-15T05:38:33.970
23152
2016-03-15T08:50:24.970
12362
question
onsen-ui
Cordova/OnsenUI ListでGoogleグラフを表示したい

[code]

    <div id="chart_div"></div>
    
[/code]

IDはドキュメント内で一意の値である必要があります。  
例えば、

[code]

    <div id="chart_div{{$index}}"></div>
    
[/code]

としてみてはいかがでしょうか。


CC BY-SA 3.0
2016-03-15T08:50:24.970
23159
2016-03-15T08:50:24.970
13314
23152
answer