如何更改Angular-Chart.js的颜色
How to change colours for Angular-Chart.js
我使用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>
事实上,选项是有效的,但颜色不是。我做错什么了吗?
您应该将colours
对象声明为数组
"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)'
}];
工作Plunkr
有关更多信息,请参阅这篇文章。
对于较新的版本,请参阅eli0tt的答案,因为参数名称已经更改。
我也遇到了同样的困难。在文档中,它说要使用"颜色",但一旦我将html更新为:
chart-colours
角度阵列为:
$scope.colours = ['#72C02C', '#3498DB', '#717984', '#F1C40F'];
成功了!
命名似乎又变了。我正在使用angular-chat.js 1.0.3,条形图的颜色管理工作原理如下:
colors:[{
backgroundColor:"#F00",
hoverBackgroundColor:"#FF0",
borderColor:"#0F0",
hoverBorderColor:"#00F"
}];
在画布标记中,属性的名称是图表颜色
正如@pankajparkar所说。只需添加还可以传递html颜色和angular-chart.js,就可以在rgba中正确定义颜色对象,并具有适当的细微差别,例如$scope.colors = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];
在2017年,我得到了角度图来处理以下代码。
-
元素的名称被更改。取自角度图的源代码。
-
而且,一旦你用完了颜色,角度图表就会为你生成它们。这包括背景颜色的不透明度为0.2。
-
如果指定#十六进制颜色,将添加不透明度。
颜色规格通过全球。
app.config(['ChartJsProvider', function (ChartJsProvider) {
// Using ChartJsProvider.setOptions('bar', { didn't seem to work for me.
// Nor did $scope.chartColors. Although I only tried that in the controller.
Chart.defaults.global.colors = [
{
backgroundColor: 'rgba(78, 180, 189, 1)',
pointBackgroundColor: 'rgba(78, 180, 189, 1)',
pointHoverBackgroundColor: 'rgba(151,187,205,1)',
borderColor: 'rgba(0,0,0,0',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)'
}, {
backgroundColor: 'rgba(229, 229, 229, 1)',
pointBackgroundColor: 'rgba(229, 229, 229, 1)',
pointHoverBackgroundColor: 'rgba(151,187,205,1)',
borderColor: 'rgba(0,0,0,0',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)'
}
...
在源代码中,颜色拾取代码当前为。通过Chart.js选项设置的颜色在这里重置(我没有让它工作)。
根据angular-chat.js源代码选择颜色:
var colors = angular.copy(scope.chartColors ||
ChartJs.getOptions(type).chartColors ||
Chart.defaults.global.colors
是的,如果未指定对象,则会为您设置不透明度。来自angular-chat.js:
function convertColor (color) {
if (typeof color === 'object' && color !== null) return color;
if (typeof color === 'string' && color[0] === '#') return getColor(hexToRgb(color.substr(1)));
return getRandomColor();
}
...
function getColor (color) {
return {
backgroundColor: rgba(color, 0.2),
pointBackgroundColor: rgba(color, 1),
pointHoverBackgroundColor: rgba(color, 0.8),
borderColor: rgba(color, 1),
pointBorderColor: '#fff',
pointHoverBorderColor: rgba(color, 1)
};
}
您想说:"colors"
$scope.colours = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];
此外,我们还可以看到其他可以更改的属性,如:图例、系列、悬停。在每个图表旁边,你都可以看到一个名为"设置"的选项,这就是你可以更改的全部内容。
使用最新版本的$scope.color似乎不起作用。您需要使用chart-dataset-override="colors"
演示
angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
$scope.results = {'1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0};
$scope.labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
$scope.data = [
[1, 3, 5, 8, 9, 10, 11, 12, 33, 5]
];
$scope.colors = [{
fillColor: 'rgba(59, 89, 152,0.2)',
strokeColor: 'rgba(59, 89, 152,1)',
pointColor: 'rgba(59, 89, 152,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(59, 89, 152,0.8)'
}];
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multi Slot Transclude</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
</head>
<body ng-app="app" ng-controller="DoughnutCtrl">
<canvas
class="chart chart-bar"
chart-data="data"
chart-labels="labels"
chart-dataset-override="colors">
</canvas>
</body>
</html>
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 更改使用Chart.js创建的图表中的轴线颜色
- 我如何制作一个JS函数,它可以从相似的原始颜色双向更改为某个颜色
- JS幻灯片与CSS背景颜色变化
- Chart.js条形图:网格颜色和隐藏标签
- JS-颜色选择器只有第一个工作
- 使用JS将页面中的每个字母设置为随机颜色.为什么在页面的每个打开标记之前总是有一组额外的span标记
- Highcharts.js设置用于更改列颜色的阈值
- charts js更改折线图轴的字体大小/颜色和背景线
- Three.js CSG如何更改结果's的材质和颜色
- d3.js轴标签-颜色不变
- ext js 将面板的颜色更改为渐变
- 如何在动态 js 中更改一组节点的颜色
- 动态更改敲除js中一行的颜色
- Three.js透明对象和颜色更改(load.obj+.mtl)
- 为什么可以't我在highstocks.js中的蜡烛图中获得超过55个条形的单个条形颜色
- 获取图像的第一个像素颜色(JS/jQuery)
- 更改每个级别的背景颜色(js游戏)
- 使用JavaScript改变SVG路径的颜色(JS颜色库)
- 从数组向图表添加标签和颜色.JS