Question

我按照所有教程，包括所有必需的js和css，html是根据教程而在我的js中创建的图表没有显示在我的页面中。

Css和JS：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>   
<script src="js/angular-chart.js"></script>
<script src="js/angular-chart.min.js"></script>
<script src="js/bootstrap.min.js"></script>

ng-app和ng-controller：

<body class="container-full" ng-app="comando">

<div id=D12 class="col-md-12" ng-controller="fchart">
                <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series"
                    chart-click="onClick">
                </canvas> 
            </div>

的script.js：

var app = angular.module('comando', ["chart.js"]);

app.controller("fchart", function ($scope) {

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Series A', 'Series B'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
    ];
    $scope.onClick = function (points, evt) {
        console.log(points, evt);
    };
});

我不知道我能做什么。我aprecciate帮助........

Answer 1

根据github repo，有一个issue。解决方案是：

通过卸载当前版本并重新安装新版本，将angular-chart.js库升级到最新版本。假设您正在使用bower，请删除对Chart.js库和angular-chart.js库的引用，然后添加Chart.js的v 2.x和v 1.0.0 angular-chart.js的-alpha6到您的项目并在html文件中添加引用

bower install angular-chart.js#1.0.0-alpha6 --save
在您的控制器中，添加对商店图表选项的引用

$scope.chartOptions={ legend: { display: true, position: 'bottom' } };
如果您正在使用图例功能，请在HTML文件中对指令进行如下更改

删除chart-legend属性并替换为chart-options="chartOptions"

Example

<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series"
                chart-click="onClick">
            </canvas>

变为

<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-options="chartOptions" chart-series="series"
                chart-click="onClick">
            </canvas>

角度图表不会显示在我的页面中

1 个答案: