离子框架中的ChartJs

Question

我担心离子并试图用Chart.js构建一个简单的馅饼。 我尝试了很多东西，但馅饼永远不会出现。

这是我的代码：

HTML：

<canvas id="myChart" width="400" height="400" />

JS：

var ctx = document.getElementById("myChart").getContext("2d");
console.log('ctx', ctx)
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});

Answer 1

如果您使用的是Ionic Framework，那么您也应该使用AngularJS。如果是这样，那么您需要在控制器中包含依赖项。我很容易在项目中使用ChartJS。发布你的控制器javascript代码，我可以帮你设置。首先看一下这个链接：

https://github.com/gonewandering/angles

您需要先在index.html文件中包含这些文件：

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js"></script>
<script src="angles.js"></script>

然后包括＆＃34;角度＆＃34;作为依赖：

var app = angular.module("anglesExample", ["angles"]);

其他一切似乎都没问题。

祝你好运！

Answer 2

我建议您使用另一个图表生成器，例如：

angular-charts

这是为了与角度一起工作......就像Ionic一样。

Answer 3

如果您使用的是Chart.js，请确保添加对app.js的引用

angular.module('yourapp', ['ionic', 'chart.js']);

此外，您还需要在index.html中包含以下内容，当然您必须确保指向下面放置3个文件的正确目录。

<!-- CSS file -->
<link rel="stylesheet" href="css/angular-chart.css">
<!-- Library files -->
<script src="angular.chart.min.js"></script>
<script src="Chart.js"></script>

Answer 4

离子骨架的最佳响应图

https://market.ionic.io/themes/charts