无法使用chart.js更改颜色线

Question

我使用chart.js制作折线图，但我无法更改图表的颜色线，我看到它是灰色的。

我的代码是...

    $(document).ready(function(){
$.ajax({
url: "chart/maderas_Chart.php",
method: "GET",
success: function(data) {
  console.log(data);
  var hora = [];
  var valor = [];

  for(var i in data) {
    hora.push("Hora " + data[i].hora_nueva);
    valor.push(data[i].valor);
  }

  var chartdata = {
    labels: hora,
    datasets : [
      {
        label: 'Dique Las Maderas',
        fill: false,
        boderColor: "#bae755",
        borderDash: [5, 5],
        strokeColor: "#e755ba",
        pointColor: "#55bae7",
        pointStrokeColor: "#55bae7",
        pointHighlightFill: "#55bae7",
        pointHighlightStroke:"#55bae7",
        data: valor
      }
    ]
  };


  var ctx = document.getElementById("maderas_Chart");
  var LineGraph = new Chart(ctx, {
    type: 'line',
    data: chartdata,
    options: {
            responsive: true,
            title:{
                display:true,
                text:'Dique Las Maderas'
            },
            tooltips: {
                mode: 'index',
                intersect: false
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Hora'
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Valor'
                    }
                }]
            }
        }
  });
},
error: function(data) {
  console.log(data);
}
});
});

当我第一次配置图表时，我可以更改颜色，但是当我添加更多代码时，我就不能再更改颜色了，我删除了所有代码，但仍然无法更改线条颜色。 我使用的是 Chart.js 版本 2.7 和 jquery。

提前致谢...

Answer 1

这是因为，您正在使用已弃用的属性（在 ChartJS 1.x 中使用） 来设置颜色。请改用以下属性 （适用于 ChartJS 2.7） :

datasets: [{
   label: 'Dique Las Maderas',
   fill: false,
   borderColor: "#bae755",
   borderDash: [5, 5],
   backgroundColor: "#e755ba",
   pointBackgroundColor: "#55bae7",
   pointBorderColor: "#55bae7",
   pointHoverBackgroundColor: "#55bae7",
   pointHoverBorderColor: "#55bae7",
   data: valor
}]

Answer 2

对于 Chart.js v4，您可以在数据集上设置

borderColor

属性。

datasets: [{
        label: 'Dique Las Maderas';
        data: valor;
        borderColor: 'rgb(186, 231, 85)'; // this will change the line colour.
    }]