Chart.js不显示在我的视图 [英] Chart.js not showing in my view

问题描述

我有一个应用程序运行angular.js和我的一个视图应该加载图表。我使用chart.js为它，但由于某些原因，它不工作，没有错误显示在我的控制台。
这是我创建图表的函数：

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

    }

以下是图表应显示的HTML：

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>

，我也加载最新版本的Chart.js：

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>

我注意到的一件事是，画布正在渲染0维度：

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?

推荐答案

问题：函数之前将画布加载到视图上，因此我使用 setTimeout（）调用 writeBatteryChart（）一个延迟，以便等待画布被渲染。

The problem: I was calling the function before the canvas be loaded on the view, so I used a setTimeout() to call the writeBatteryChart() with a delay in order to wait the canvas be rendered.

这篇关于Chart.js不显示在我的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！