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

Question

我已经在 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];


});

我想要的例子

Answer 1

对于那些稍后在这里想知道的人；有新版本的 chart.js 和 angular-chart.js 可用。 Chart.js 2.1 及更高版本支持水平图表，angular-chart.js 有一个新分支可以与最新的 chart.js 版本一起使用 see the github repo here .

使用这个版本不需要上面提到的 Tom Southall 的 Horizo​​ntalBar 插件。

使用上述 angular-chart.js 站点提供的示例，并确保将类属性的值设置为“chart-horizo​​ntalBar”。

<canvas id="HorizontalBar" class="chart chart-horizontalBar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>