标签: angular-chart

我正在使用angular-charts.js中包含的 Chart.js在 Ionic 框架应用程序中创建条形图。

我想让酒吧背景完全不透明。

这是我必须创建图表的代码。

<canvas id="bar" class="chart chart-bar" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}" colours="[ '#ffff00',    '#0066ff']"></canvas>

知道我该如何实现这一目标吗？

多谢！

我已经在 angular-chart.js 中成功创建了一个条形图，但现在我想将其更改为水平条形图。另外，我希望将字段放置在水平条本身的内部：

代码

 angular.module("app", ["chart.js"])
    .controller("LineCtrl", function ($scope) {

    var x =
    {
        "labels": [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
            "Sunday"
        ],
        "data": [
            99,
            59,
            80,
            81,
            56,
            55,
            40
        ],
        "type": "line",
        "series": "eventTypePerDay"
    }

    console.log(x.series);
    //ses all of the variables to build the chart
    $scope.labels = x.labels;
    $scope.colours = ['#71d078'];
    $scope.type = x.type;
    $scope.data = [x.data];
    $scope.series = [x.series];


});

我想要的例子

我想使用angular-chart.js，所以我先按照安装说明进行操作，首先从Charts.js的github https://github.com/chartjs/Chart.js下载了最新版本，然后又下载了angular-chart.js 的最新版本。来自github https://github.com/jtblin/angular-chart.js的 Charts.js 。

我将此文件复制并粘贴到我的项目中：

该文件来自chart.js chart.js（我从chart.js复制了此文件，注意第一个字母小写）

该文件来自angular-chart.js angular-chart.min.js

都包括这样

<script src="/myApp/chart.js"></script>
<script src="/myApp/angular-chart.min.js"></script>

然后我将此指令添加到我的应用中

angular.module('myApp',
    [
        'zingchart-angularjs',
        'oitozero.ngSweetAlert',
        'chart.js'
    ])

但是我得到这个错误

chart.js:4 Uncaught ReferenceError: require is not defined(anonymous    function) @ chart.js:4
angular-chart.min.js:10Uncaught Error: Chart.js library needs to be included, see http://jtblin.github.io/angular-chart.js/
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?

我正在学习 angular-chart-js 的阶段。我正在尝试使用 angular-chart.js 来绘制饼图。但是我无法找到一种在饼图上显示标签（而不是工具提示）的方法，这些标签描述了每个数据切片。

这是我如何做到的：

angular.module('App').controller('Controller', ['$scope', '$http', '$location', '$window', '$routeParams',
    function($scope, $http, $location, $window) {
        var diskDataJson = {
            "data": [80, 12],
            "labels": [Used space, Free Space],
            "colours": ['#9AB6F0', '#C2D3F6']
        };
    
        $scope.pieDiskData = json;
    }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table border="0" width="100%">
  <tr>
    <td style="border-left: 1px solid #0099CC" width="25%">
      <center><span><label ng-bind-html="'load.static.dashboard.system.DUSAGE' | translate"/></span>
      </center>
      <canvas id="pie33" class="chart chart-pie chart-xs ng-isolate-scope" height="120" width="240" data="pieDiskData.data" labels="pieDiskData.labels" colours="pieDiskData.colours" legend="true"></canvas>
    </td>
  </tr>
</table>

我正在使用angular-chart.js库(https://jtblin.github.io/angular-chart.js/)来实现圆环图.

如何更改甜甜圈弧的宽度？