javascript - AngularJs 和图表

标签 javascript html angularjs angular-chart

我正在尝试使用 angular-chart 创建图表。然后我按照文档中相关的步骤和要求进行操作,但我的 Canvas 标记没有呈现任何内容。

HTML

我的布局 HTML:

<div class="content-wrapper"> <div class="container"> <section class="content"> @RenderBody() </section> </div>

我的索引.html

<div ui-view="Content"> </div>

我的嵌套 View

<head> <title></title> <script src="~/Content/chartjs/Chart.js"></script> <script src="~/Content/chartjs/angular-chart.js"></script> <link rel="stylesheet" href="~/Content/chartjs/angular-chart.css" /></head> <body ng-controller="RecordCtrl"> <div class="panel-body" ng-show="true"> <canvas id="doughnut" class="chart chart-doughnut" chart-data="data" chart-labels="labels"></canvas> </div>

app.js:

var myApp = angular.module('app', ['ngRoute', 'ui.bootstrap', 'ngMaterial','chart.js']);

JS:

$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
$scope.data = [300, 500, 100];

我认为我已经完成了链接中所需的步骤,但我仍然得到:

最佳答案

这是一个JSFiddle .

请确保您引用正确的 chart.js 版本 1.1.1 Chart.js v1.1.1

angular-chart.js v0.8.8这些都是最新的,并且可以在我的 JSFiddle 中使用。

关于javascript - AngularJs 和图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38204985/

相关文章:

angularjs - 对 AngularJS $window 服务进行单元测试

javascript - CSS DOM Traversal 优于 JavaScript DOM Traversal?

javascript - Maquette 的 createMapping() 参数的 updateTarget 函数中发生了什么?

javascript - IE 上的 const 属性是什么

javascript - 扩展功能 - 合并两个功能?

javascript - JQuery 对话框 Div 高度

html - Xslt 生成 Html <IMG> 标签。如何使用 XML 节点值作为 <IMG> 标签的 src 属性

javascript - 解决 $rootScope :infdig Infinite $digest Loop

html - 在 HTML 中绝对居中表格

angularjs - Angular 谷歌地图动态折线有很多点