2016-11-16 252 views
0

我有一個多線圖表,使用chart.js版本2.4和angular-chart.js.我想分別顯示紅色和綠色的兩條線,我不想在線下填充顏色。我可以如何實現這一點?在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