7

作業中のプロジェクトで angular-chartJS を使用していますが、棒グラフの棒ごとに異なる色が必要です。

キャンバス：

<canvas id="bar" class="chart chart-bar" data="medal_data" labels="medal_ticks"></canvas>

コントローラ：

$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'];

属性をキャンバスに追加しようとしましたがcolours="medals_colours"、唯一の問題は、配列の最初の色のみを使用することです。私が望むのは、各色が各列を表すことです。Soは、 、forなど#087D76を表すために使用されます。Gold#B3BC3ASilver

4

1 に答える 1

5

グラフの棒ごとに異なる色を付けたいので、それらの値を配列で渡します。しかし、そのchart.jsようなタイプの機能はサポートされていません。

理由

バーエリアに見える色はあくまでオプションですが、 chart.js LinefillColorのソースコードを見ると

コード

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, //<--This line responsible for filling color
        highlightFill: dataset.highlightFill || dataset.fillColor,
        highlightStroke: dataset.highlightStroke || dataset.strokeColor
    }));
}, this);

fillColor上記のコードは、必要な文字列を明確に示しています。とにかく、その文字列には 1 つの色しか渡すことができません。また、バー シリーズには 1 つの色のみが適用されます。要件を実行可能にしたい場合は、に変更を加える必要がありますchart.js。

chart.js で行われる変更

チャートの各バーに適用する必要があるカラー配列を渡すことができるように、この行をfillColor: dataset.fillColor,toに変更する必要があります。の変数は、配列で指定した順序でバーに色が適用されるようにします。色は に変更されます。fillColor: dataset.fillColor[index],index.each$scope.medals_colours = [{fillColor:['#087D76', '#B3BC3A', '#38B665', '#8B4A9D']}];

変更されたコード

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] || dataset.fillColor, //<--getting color using index
        highlightFill: dataset.highlightFill || dataset.fillColor,
        highlightStroke: dataset.highlightStroke || dataset.strokeColor
    }));
}, this);

マークアップ

  <div class="graph-display" ng-controller="jsonServerBox">
    <canvas id="bar" class="chart chart-bar" data="medal_data" labels="medal_ticks" 
    colours="medals_colours"></canvas>
  </div>

コントローラ

  app.controller('jsonServerBox', function($scope) {

    $scope.medal_ticks = ['Gold', 'Silver', 'Bronze', 'Not passed'];
    $scope.series = ['Medaljer'];
    $scope.medals_colours = [{fillColor:['#087D76', '#B3BC3A', '#38B665', '#8B4A9D']}];

    $scope.medal_data = [['1', '5', '2', '0']];
  });

ハックに見えることはわかっていますが、作成する必要があります。

称賛は@tpieこの回答に行きます

デモプランカー

于 2015-05-27T16:46:18.740 に答える