Chart.js沒有顯示在我的視圖中

Question

我有一個運行angular.js的應用程序，我的一個視圖應該加載圖表。 我正在使用chart.js，但由於某種原因，它不起作用，我的控制台上沒有顯示錯誤。 這是我創建圖表的函數：

$scope.writeBatteryChart = function(){
        console.log("Function was called");
        var data = {
            labels: ["10:30am", "11:00am", "11:30am", "12:00pm", "12:30pm", "01:00pm", "01:30pm"],
            datasets: [
                {
                    label: "Battery",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                }
            ]
        };

        var options = {
            responsive: true,
            bezierCurve : false
        }

        var ctx = document.getElementById("myChart").getContext("2d");
        var myLineChart = new Chart(ctx).Line(data, options);

    }

這是圖表應該出現的HTML：

               <div class="row">
                    <div class="col-md-8 col-sm-8 col-xs-8" style="padding-left: 0px;">
                        <div class="panel panel-info">
                          <div class="panel-heading">
                            <h3 class="panel-title">Battery <i class="fi-battery-half"></i></h3>
                          </div>
                          <div class="panel-body">
                            <canvas id="myChart" height="300"></canvas>
                          </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4" style="padding-left: 0px; padding-right: 0px;">

                    </div>
                </div>

我還加載了最新版本的Chart.js：

    <!--Chart plugin -->
    <script src="bower_components/Chart.js/Chart.js" language="javascript"></script>

我注意到的一件事是畫布正在渲染0維：

有人能看到我做錯了什么嗎？

Answer 1

問題：我在畫布加載到視圖之前調用了函數，所以我使用setTimeout()來延遲調用writeBatteryChart()以等待畫布呈現。

Answer 2

您必須在畫布中添加渲染的內容。 希望它能幫到Link