web-dev-qa-db-ja.com

angular-chart.jsで各バーに異なる色を設定するにはどうすればよいですか？

私は Angular-Chart.jsの色を変更する方法 を見てきましたが、特定のバーではなく（データセット）全体の色に関連しています。

私が探しているのは、Angularに 棒グラフの各棒の異なる色; ChartJS を適用する方法です。

だから、私は棒グラフを持っています：

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

次のangularコード（もちろんコントローラー内）

_$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()はランダムな色を返します。

現在、coloursフィールドはこの色をすべてのバーに適用しています。

same colour :(different colours

バーごとに実際に異なる色が必要な場合：

プランカー

javascriptangularjschartsbar-chart
13
Huey

Plunkerデモ

最も簡単な方法は、chart.jsソースファイルを変更して、単一の色文字列ではなく、fillColorの色の配列を受け入れることです。

他の提案された解決策の1つを機能させることができれば、それは非常に偏った方法で行われなければならなくなると思います。

一部の人々はソースを微調整するのが好きではないかもしれませんが、それがどれほどシンプルで簡単であり、それが望ましい結果を達成し、それがソリューションの「角度のある」ものではないということです...それを単に改善と呼びましょうchart.js。

「棒」グラフのみを変更して、色の配列を受け入れるようにしたことに注意してください。chart.jsは、グラフタイプごとにfillColorを個別に参照しているようです。したがって、この変更を行って、どのグラフタイプでも機能するようにする必要があります。

変更する必要がある場所：

            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);

このコードブロックは、棒グラフのChart.type.extend関数にあります。これを探してください：

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

そして、関数の内部をさらに見て、fillColorをdatasetObject.barsにプッシュする場所を探します。

今度は、前と同じようにチャートを設定します。ただし、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}
      };
        }
7
tpie

angular-chart.js の最新バージョンを使用して、ライブラリ自体を変更せずに、条件に基づいて色を変更する例を次に示します。代わりに、chart-dataset-override機能。

秘訣は、データセットが1つだけのシリーズを使用することです。

HTML

<div ng-controller="chartControl">
  <canvas id="bar" class="chart chart-bar" 
    chart-data="goal.data" 
    chart-labels="goal.labels" 
    chart-options="goal.options" 
    chart-series="goal.series" 
    chart-dataset-override="goal.datasetOverride"></canvas>
</div>

JavaScript

次のコードをコントローラーに追加します。

  var exceeded = '#27ae60';
  var achieved = '#bdc3c7';
  var defeated = '#e74c3c';

  $scope.goal = [];
  $scope.goal.goal = 3;

  $scope.goal.series = [ 'Visits' ];
  $scope.goal.labels = [
    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'
  ];
  $scope.goal.data = [
    [5, 2, 3, 3, 3, 4, 2, 3, 4],
  ];

  var backgroundColours = [];

  // Assign the background colour based on whether the goal was achieved.
  for( var i = 0; i < $scope.goal.data[0].length; i++ ) {
    var v = $scope.goal.data[0][i];

    if( v > $scope.goal.goal ) {
      backgroundColours[i] = exceeded;
    }
    else if( v < $scope.goal.goal ) {
      backgroundColours[i] = defeated;
    }
    else {
      backgroundColours[i] = achieved;
    }
  } 

  // Create a place to hold the background colours.
  $scope.goal.datasetOverride = [{ backgroundColor: [] }];

  // Assign the colours to the pre-populated array.
  $scope.goal.datasetOverride[0].backgroundColor = backgroundColours;

  $scope.goal.options = {
    barShowStroke: false,
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 7,
          stepSize: 1
        }
      }]
    }
  };

出力

生成する：

Chart Output

関連リンク

9
Dave Jarvis

チャートライブラリの大きな問題の1つは、遅かれ早かれ、ライブラリをハッキングまたは拡張することによってのみ違反できる壁にぶつかることです。あなたがその壁にぶつかったことを知っていると、この質問への答えは何になるでしょう。

カスタムのchart.jsグラフを作成することはできますが、d3.jsを使用してそれを解決することもできます。基本的なangular d3.js棒グラフの例の1つを取り上げ、必要な動作を追加しました。

var colors = d3.scale.category10();

// ...

bars.enter().append('rect')
    .classed('bar', true)
    .attr({x: chartW,
           width: barW,
           y: function(d, i) { return y1(d); },
           height: function(d, i) { return chartH - y1(d); },
           fill: function(d,i) { return colors(i) }
    })
// ...

http://plnkr.co/edit/9RCYAPCEj9iRsxkkYPaV?p=preview

塗りつぶしやストロークなどを変更するなど、グラフをカスタマイズすることは簡単です。まだたくさんのコードがありますが、ライブラリのサポートを超えてカスタマイズしたい場合は、常にたくさんのコードが必要です。

2
Emil Ingerslev