我使用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。
提前致谢...
答案 0 :(得分: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
}]