我在我正在进行的项目中使用ChartJS,并且我需要为条形图中的每个条形图使用不同的颜色.
以下是条形图数据集的示例:
var barChartData = {
labels: ["001", "002", "003", "004", "005", "006", "007"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [20, 59, 80, 81, 56, 55, 40]
}]
};
Run Code Online (Sandbox Code Playgroud)
有没有办法以不同方式绘制每个栏?
我使用Angular-Chart.js(AngularJS Chart.js版本)来创建条形图.图表正在使用除颜色之外的选项.
即使我设置它们,它在文档中指出,它们仍然是灰色的.
<div class="graph-display" ng-controller="chartController">
<canvas class="chart chart-bar"
data="bilans.data"
labels="bilans.labels"
series="bilans.series"
options="{
scaleShowHorizontalLines: true,
scaleShowVerticalLines: false,
tooltipTemplate: '<%= value %> $',
responsive: true
}"
colours="{
fillColor: 'rgba(47, 132, 71, 0.8)',
strokeColor: 'rgba(47, 132, 71, 0.8)',
highlightFill: 'rgba(47, 132, 71, 0.8)',
highlightStroke: 'rgba(47, 132, 71, 0.8)'
}"
></canvas>
</div>
Run Code Online (Sandbox Code Playgroud)
实际上,选项是有效的,但颜色不是.难道我做错了什么?
我正在我正在进行的项目中使用angular-chartJS,并且我需要为条形图中的每个条形图使用不同的颜色.
帆布:
<canvas id="bar" class="chart chart-bar" data="medal_data" labels="medal_ticks"></canvas>
Run Code Online (Sandbox Code Playgroud)
控制器:
$scope.medal_ticks = ['Gold', 'Silver', 'Bronze', 'Not passed'];
$scope.series = ['Medaljer'];
$scope.medals_colours= ['#087D76', '#B3BC3A', '#38B665', '#8B4A9D'];
$scope.medal_data = ['1', '5', '2', '0'];
Run Code Online (Sandbox Code Playgroud)
我试图将属性添加colours="medals_colours"到我的画布,唯一的问题是它只使用数组中的第一种颜色,我想要的是每种颜色代表每一列.所以,#087D76用于表示Gold,#B3BC3A对Silver等