angular-chart.js中的水平條形圖

我已成功創建了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]; 


});

例子我想

來源

2015-11-10 user2402107

引擎蓋下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。

來源

2015-11-10 16:31:42 grdaneault

你知道任何有效的例子嗎？ – user2402107

我懂了，謝謝。 – user2402107

@ user2402107你好，你能告訴我你是如何得到它的工作，我沒有能夠。謝謝。 –

對於那些稍後想到的人來說;有可用的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>

來源

2016-06-17 03:50:29

上面的鏈接沒有找到 –

angular-chart.js中的水平條形圖

回答

相關問題