Wijmo ユーザーガイド > Angular JS ディレクティブ > AngularJS と Chart ウィジェット > AngularJS と wijlinechart |
この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、および AngularJS ディレクティブを使用して、LineChart ウィジェットを HTML プロジェクト内で使用する方法について学習します。
コントローラーとモデルをそれぞれ個別のファイルで設定する、より複雑なサンプルについては、弊社 Web サイト「AngularJS Directive Gallery」内の「Wijmo Charts」を参照してください。
ドロップダウンからマークアップをコピーします
任意のテキストエディタに貼り付けます。 |
コードのコピー |
---|---|
<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> </head> <body ng-controller="MyController"> </body> </HTML> |
ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます
参照 |
コードのコピー |
---|---|
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!-- Wijmo Scripts --> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <!-- Angular --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20173.128.min.js"></script> |
スクリプト |
コードのコピー |
---|---|
<script type="text/javascript"> var app = angular.module("MyApp", ["wijmo"]); //Region class function Region(data) { this.RegionName = data.RegionName; this.Desktops = data.Desktops; this.Notebooks = data.Notebooks; this.Tablets = data.Tablets; }; function MyController($scope, $locale) { $scope.list = [ new Region( { RegionName: "West", Desktops: 5, Notebooks: 3, Tablets: 7 }), ({ RegionName: "Central", Desktops: 1, Notebooks: 6, Tablets: 8 }), ({ RegionName: "East", Desktops: 2, Notebooks: 4, Tablets: 3 }) ]; } </script> |
マークアップ |
コードのコピー |
---|---|
<wij-linechart data-source="list" height="400" width="600" show-chart-labels="false"> <axis> <y origin="0"></y> </axis> <data> <x bind="RegionName"></x> </data> <header text="Hardware Distribution"></header> <series-list> <series label="Desktops"> <data> <y bind="Desktops"></y> </data> </series> <series label="Notebooks"> <data> <y bind="Notebooks"></y> </data> </series> <series label="Tablets"> <data> <y bind="Tablets"></y> </data> </series> </series-list> </wij-linechart> |