【问题标题】:display specific color for lines in chart.js line chart在 chart.js 折线图中显示线条的特定颜色
【发布时间】:2016-11-16 12:51:33
【问题描述】:

我有一个使用 chart.js 2.4 版和 angular-chart.js 的多折线图。我想分别以红色和绿色显示 2 条线,我不想在线条下方填充颜色。我该如何实现?

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'
    }
  ]
  }
 };
});

【问题讨论】:

    标签: angularjs chart.js2


    【解决方案1】:

    做这样的事情,

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

    DEMO

    【讨论】:

    • 非常感谢。这正是我想要的效果
    猜你喜欢
    • 1970-01-01
    • 2015-04-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-21
    相关资源
    最近更新 更多