2016-11-16 18 views
0

chart.jsバージョン2.4とangular-chart.js.を使用して複数の線グラフを作成しました.2線をそれぞれ赤と緑で表示したいと思います。ラインの下に色を塗りつぶします。これをどのように達成できますか?chart.jsの線の特定の色を表示する線図

var app=angular.module("app", ["chart.js"]); 

app.controller("LineCtrl", function ($scope) { 

$scope.labels = ["January", "February", "March", "April", "May", "June", "July","August","September","October","November","December"]; 
$scope.series = ['one', 'two']; 
$scope.data = [ 
[65, 59, 80, 81, 56, 55, 40, 30, 70, 30, 70, 30], 
[28, 48, 40, 19, 86, 27, 90, 35, 70, 62, 75, 60] 

]; 

$scope.onClick = function (points, evt) { 
console.log(points, evt); 
}; 
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }]; 
$scope.options = { 
scales: { 
    yAxes: [ 
    { 
     id: 'y-axis-1', 
     type: 'linear', 
     display: true, 
     position: 'left' 
    }, 
    { 
     id: 'y-axis-2', 
     type: 'linear', 
     display: true, 
     position: 'right' 
    } 
    ] 
    } 
}; 
}); 

答えて

1

ctrl.datasetOverride = [{ 
     fill: false, 
     backgroundColor: [ 
      "#ED402A", 
      "#36A2EB", 
      "#FFCE56" 
     ] 
    }, { 
     fill: false, 
     backgroundColor: [ 
      "#F0AB05", 
      "#36A2EB", 
      "#FFCE56" 
     ] 
    } 

]; 

DEMO

+0

をこのような何かをありがとうございました。それは私が望んでいた通りに正確に機能 – user3946910

関連する問題