javascript – angular-chart.js中的水平条形图

我已经在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使用chart.js,它没有水平条形图的原生支持.也就是说,可以添加一个水平条形图插件来支持这种类型的图表：https://github.com/tomsouthall/Chart.HorizontalBar.js

我相信,为了使这项工作,您将需要使用动态图表指令

<canvas id="base" class="chart-base" chart-type="type"
  chart-data="data" chart-labels="labels" chart-legend="true">
</canvas>

然后将类型指定为Horizo​​ntalBar.

标签：javascript,angularjs,chart-js,angular-chart,angular-chartist-js
来源： https://codeday.me/bug/20190727/1557005.html