我怎样才能在角chart.js之各条设置不同的颜色？

问题描述

我看了，但它涉及到的颜色为整个（数据），而不是一个具体的吧。

I've looked at How to change colours for Angular-Chart.js, but it relates to colours for an entire (dataset), not a specific bar.

我正在寻找的是适用Different颜色的柱状图中每个条形图; ChartJS 以棱角分明。

What I'm looking for is a way to apply Different color for each bar in a bar chart; ChartJS to Angular.

所以，我已经有了一个条形图：

So, I've got a bar chart:

<canvas id="locationBar" class="chart chart-bar" data="chartParams.votes" labels="chartParams.listOfLocations" series="chartParams.series" colours="chartParams.colours" options="chartParams.options"></canvas>

通过以​​下角度code（当然在一个控制器）

With the following angular code (in a controller of course)

$scope.chartParams = {
    listOfLocations: ['Trenzalore','Earth','Caprica','Sol','Tau Ceti'],
    votes: [[5,10,6,7,2]],
    series: ["Nice Places"],
    colours: [{fillColor:getRandomColour()}],
    options: {barShowStroke : false}
};

其中， getRandomColour（）将返回一个随机颜色。

现在，颜色字段适用此颜色所有的酒吧：

Right now, the colours field applies this colour to all the bars:

当我真正想要一个不同的颜色各条：

when I actually want a different colour for each bar:

推荐答案

做最简单的事情是修改chart.js之源文件接受颜色填充颜色的阵列，而不是单一的颜色字符串。

The easiest thing to do was to modify the chart.js source file to accept an array of colors for fillColor rather than a single color string.

如果你能得到对方提出的解决方案的工作之一，我认为这将最终拥有一个非常联合国角的方式来完成。

If you could get one of the other proposed solutions working, I think it would end up having to be done in a very un-angular way.

有些人可能不喜欢扭捏的来源，但它是如何简单和容易是做的，它达到了预期的效果，而且没有任何少角，在它的解决方案......我们叫它一个改进chart.js之。

Some people may not like tweaking the source, but for how simple and easy it was to do, and it achieves the desired result, and it isn't any less 'angular' in it's solution...let's just call it an improvement to chart.js.

请注意，我只修改了栏中的图表来接受一个颜色数组，因为它似乎chart.js之引用将fillColor分别在每个图表类型。所以，你应该能够使这种修改工作的图表类型。

Note that I only modified the "bar" chart to accept an array of colors, because it seems chart.js references the fillColor separately in each chart type. So you should be able to make this modification to work for any of the charts types.

这个地方需要修改：

            helpers.each(dataset.data,function(dataPoint,index){
                //Add a new point for each piece of data, passing any required data to draw.
                datasetObject.bars.push(new this.BarClass({
                    value : dataPoint,
                    label : data.labels[index],
                    datasetLabel: dataset.label,
                    strokeColor : dataset.strokeColor,
                    fillColor : dataset.fillColor[index],   // <- added [index] here
                    highlightFill : dataset.highlightFill || dataset.fillColor,
                    highlightStroke : dataset.highlightStroke || dataset.strokeColor
                }));
            },this);

code的此块可以在Chart.type.extend功能条形图中找到。只要看看这个：

This block of code can be found in the Chart.type.extend function for the bar chart. Just look for this:

Chart.Type.extend({
        name: "Bar",

和期待进一步下跌的函数里面它推动将fillColor到datasetObject.bars的地方。

and look further down inside that function for the place where it pushes the fillColor to the datasetObject.bars.

现在刚刚成立图表像以前一样，除了饲料它填充颜色的数组：

Now just set up your chart like before, except feed it an array for fillColor:

function($scope){
          $scope.chartParams = {
        listOfLocations: ['Trenzalore','Earth','Caprica','Sol','Tau Ceti'],
        votes: [[5,10,6,7,2]],
        series: ["Nice Places"],
        colours: [{fillColor:["#FF0000", "#00FF00", "#0000FF", "#00FFFF", "#FFFF00"]}],
        options: {barShowStroke : false}
      };
        }

这篇关于我怎样才能在角chart.js之各条设置不同的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！