javascript angular-chart.js 中的水平条形图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33634686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal Bar-Chart in angular-chart.js
提问by user2402107
I have successfully created a bar chart in angular-chart.js but now I want to change it into a horizontal bar chart. Also, I would like the fields to be placed inside of the horizontal bar itself:
我已经在 angular-chart.js 中成功创建了一个条形图，但现在我想将其更改为水平条形图。另外，我希望将字段放置在单杠本身的内部：
code
代码
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];
});
example of what I want
我想要的例子
回答by grdaneault
Under the hood angular-chart.js uses chart.js, which does not have native support for horizontal bar charts. That said, there is a horizontal bar chart plugin that can be added to support this type of chart: https://github.com/tomsouthall/Chart.HorizontalBar.js
在引擎盖下 angular-chart.js 使用 chart.js，它没有对水平条形图的本机支持。也就是说，可以添加一个水平条形图插件来支持这种类型的图表：https: //github.com/tomsouthall/Chart.HorizontalBar.js
I believe that to make this work, you will need to use the dynamic chart directive
我相信要完成这项工作，您将需要使用动态图表指令
<canvas id="base" class="chart-base" chart-type="type"
chart-data="data" chart-labels="labels" chart-legend="true">
</canvas>
And then specify the type as HorizontalBar.
然后将类型指定为HorizontalBar.
回答by Captain Dashenka
for those wondering here later; there are new versions of chart.js and angular-chart.js available. Chart.js 2.1 and later support horizontal charts, angular-chart.js has a new branch to work with the latest chart.js version see the github repo here.
对于那些以后想知道的人；有新版本的 chart.js 和 angular-chart.js 可用。Chart.js 2.1 及更高版本支持水平图表，angular-chart.js 有一个新分支可以与最新的 chart.js 版本一起使用，请参见此处的 github 存储库。
Using this version does not require the above mentioned HorizontalBar plugin by Tom Southall.
使用这个版本不需要上面提到的 Tom Southall 的 HorizontalBar 插件。
Use the samples available at the above angular-chart.js site, and make sure to set the value of the class attribute to "chart-horizontalBar".
使用上述 angular-chart.js 站点提供的示例，并确保将 class 属性的值设置为“chart-horizontalBar”。
<canvas id="HorizontalBar" class="chart chart-horizontalBar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
回答by manishk
I don't think there is a need to include Chart.HorizontalBar.jsnow. This is how to get a simple horizontal bar chart in Angular using chart.js-
我认为现在不需要包含Chart.HorizontalBar.js。这是如何使用 chart.js 在 Angular 中获得一个简单的水平条形图 -
HTML-
HTML-
<div>
<canvas id="bar-chart-horizontal" width="800" height="450"></canvas>
</div>
JS controller-
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'
}
}
});
