Chart.js没有显示在我的视图中

Question

I have an app running with angular.js and one of my view should load an chart. I'm using chart.js for it, but for some reason it's not working and no error is shown on my console. Here is my function that creates the chart:

$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);

    }

Here's the HTML where the chart should appear:

               <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>

and I'm also loading the latest version of the Chart.js:

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

One thing that I noticed is that the canvas is being rendered with 0 dimensions:

Does someone can see where I'm doing something wrong?

Answer 1

问题：我在画布加载到视图之前调用了函数，所以我使用setTimeout()来延迟调用writeBatteryChart()以等待画布呈现。

Answer 2

You have to add your rendered things inside of canvas. Hope it will help Link