[英]Horizontal Bar-Chart in 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>
然后將類型指定為HorizontalBar
。
對於那些后來想知道的人; 有新版本的chart.js和angular-chart.js可用。 Chart.js 2.1及更高版本支持水平圖表,angular-chart.js有一個新分支可以使用最新的chart.js版本, 請參閱此處的github repo 。
使用此版本不需要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>
我認為現在不需要包含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'
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.