2016-07-05 3 views
1

angular-chartでグラフを作成しようとしています。その後、私はステップと必要な要件をドキュメントに関連する必要がありますが、私のキャンバスタグは何も描画しません。AngularJsとchart

HTML

マイレイアウトのHTML:

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

マイIndex.htmlと

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

マイネストされたビュー

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

私はしかし、私はまだだ、私はリンクに必要な手順を行ってきたと思う:

+0

どこから 'labels'と' data'を取得しますか?それはAjax経由ですか、それともコントローラの静的なJSONですか? –

+0

Angular.jsへの参照も入れますか? – Weedoze

+0

chart.jsをモジュールに挿入しましたか? angular.module( 'myModule'、['chart.js']); 投稿したコードに間違いはありませんので、完全なコントローラとhtmlを投稿してください。 – marton

答えて

0

ここにはJSFiddleがあります。

あなたは正しいchart.jsバージョン1.1.1 Chart.js v1.1.1

angular-chart.js v0.8.8これらは、それぞれの最新のであり、私のJSFiddleで動作を参照していることを確認してください。

+0

それは人間です。..でもまだ動作しません:(私はangular-chart.min.cssを参照する必要がありますか? –

+0

@Ian OctoBear、はい、CSSファイルを参照してください。 – shammelburg