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

在后台 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>

然后指定类型为HorizontalBar。

Answer 2

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

使用此版本不需要上述 Tom Southall 的 HorizontalBar 插件。

使用上述 angular-chart.js 站点提供的示例，并确保将 class 属性的值设置为 "chart-horizontalBar".

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

Answer 3

我认为现在没有必要包括Chart.HorizontalBar.js。这是如何使用 chart.js-

在 Angular 中获得简单的水平条形图

HTML-

<div>
    <canvas id="bar-chart-horizontal" width="800" height="450"></canvas>
</div>

JS 控制器-

var myChart = new Chart(document.getElementById("bar-chart-horizontal"), {
        type: 'horizontalBar',
        data: {
          labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
          datasets: [
            {
              label: "Population (millions)",
              backgroundColor: ["#ff0000", "#8e5ea2","#3cba9f","#454545","#c45850"],
              data: [2478,5267,734,784,433]
            }
          ]
        },
        options: {
          legend: { display: false },
          title: {
            display: true,
            text: 'Predicted world population (millions) in 2050'
          }
        }
    });

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

Horizontal Bar-Chart in angular-chart.js

javascript

angularjs

chart.js

angular-chart

angular-chartist.js