相关疑难解决方法(0)

条形图中每个条形的颜色不同; ChartJS

我在我正在进行的项目中使用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)

有没有办法以不同方式绘制每个栏?

javascript chart.js

72
推荐指数
9
解决办法
14万
查看次数

如何更改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>
Run Code Online (Sandbox Code Playgroud)

实际上,选项是有效的,但颜色不是.难道我做错了什么?

javascript charts bar-chart angularjs chart.js

25
推荐指数
5
解决办法
6万
查看次数

angular-chartjs条形图中每列的颜色不同

我正在我正在进行的项目中使用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,#B3BC3ASilver

javascript bar-chart angularjs chart.js angular-chart

7
推荐指数
1
解决办法
3860
查看次数