Question

我正在尝试编写一个交互式图表，该图表使用来自JSON的数据并将其放入图表数据中。要做到这一点，我必须将chart.js和angular组合在一起。

作为指导原则，我正在关注http://jtblin.github.io/angular-chart.js/，但问题在于我的工作并不重要，图表不会出现。

我会上传部分代码（我认为）会出现问题。

<script>
    var app = angular.module('app', ['chart.js']);
    app.controller('BarCtrl', function ($scope) {
        $scope.options = { legend: { display: true } };
        $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
        $scope.series = ['Series A', 'Series B'];
        $scope.data = [
            [65, 59, 80, 81, 56, 55, 40],
            [28, 48, 40, 19, 86, 27, 90]
        ];
    });

</script>
<div ng-app="app" ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar" chart-type="type"
        chart-data="data" chart-labels="labels" chart-series="series">
</canvas>
</div>
</body>
</html>

经过很长一段时间终于有效：

解决方案：

{{1}}

Answer 1

HTML中似乎有错误。您的画布标签未正确关闭。我注意到，如果您从其网站上的角图表示例中复制代码，则会出现此问题。很讨厌很烦人。您可能还需要设置画布的高度和宽度，以便正确显示。

＆＃13;

<html>

<head>
    <meta charset="utf-8">
    <title>Test</title>

    <script>
        var app = angular.module('app', ['chart.js']);

        app.controller('BarCtrl', function($scope) {
            $scope.labels = ['2006', '2007', '2008',       '2009', '2010', '2011', '2012'];
            $scope.series = ['Series A', 'Series B'];

            $scope.data = [
                [65, 59, 80, 81, 56, 55, 40],
                [28, 48, 40, 19, 86, 27, 90]
            ];
        });
    </script>


</head>

<body ng-app="app">
    <div ng-controller="BarCtrl">
        <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series" width="400" height="400">
        </canvas>
    </div>


<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/chart.js/dist/Chart.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>


</body>

</html>

＆＃13;

Angular和ChartJS创建条形图

1 个答案: