у меня есть рукописный шрифт с линейным графиком, который я не знаю, как лишение его легенды и менять ему цвета осей и имя серий. Он был бы благодарен, если бы они бросили мне кабель пожалуйста.
document.addEventListener('DOMContentLoaded', function () {
const ctx = document.getElementById('draw').getContext('2d');
let monthHours = {
mes1: horas_mes1,
mes2: horas_mes2,
mes3: horas_mes3,
mes4: horas_mes4,
mes5: horas_mes5
};
let monthMinutes = {
mes1: min_mes1,
mes2: min_mes2,
mes3: min_mes3,
mes4: min_mes4,
mes5: min_mes5
};
const totalHours = [];
for (let key in monthHours) {
const val = monthHours[key] / 1;
const minute = monthMinutes[key];
totalHours.push(val + (minute / 100));
}
const labels = [mes1letra,mes2letra,mes3letra,mes4letra,mes5letra];
const datasets = [
{
label: 'Horas de clases',
backgroundColor: 'rgba(0, 150, 255, .13)',
borderColor: 'rgba(255, 255, 255, .35)',
pointColor: '#fff',
pointBorderColor: 'rgba(0, 150, 255, .55)',
pointBackgroundColor: '#fff',
data: totalHours
}
];
const options = {
tooltips: {
callbacks: {
label: function (tooltip, data) {
const index = tooltip.index;
let hours = data.datasets[0].data[index];
let minutes = (hours % 1).toFixed(2);
hours = parseInt(hours);
minutes = minutes.substring(minutes.indexOf('.') + 1);
return `${hours} hours y ${minutes} minutes`;
}
}
}
};
new Chart.Line(ctx, {
data: { labels, datasets },
options
});
});
Как в твоем вопросе код, что ты печатаешь эту неполно (ej: horas_mes1
он undefied
) я создал другой график, чтобы подтверждать примерами, как делание того, в чем ты нуждаешься.
Чтобы изменять цвет осей, ты должен делать это через prop color
Грид Линес
options: {
scales: {
xAxes: [{
gridLines:{
color:"rgba(0,255,0,1)" // <-- Color eje X
Чтобы дезактивировать legendas ты должен делать это через свойство display
Legend
options: {
legend: {
display: false // <-- Ocultar legends
Чтобы изменять имя серий, нуждался в том, чтобы знать, который, и что тебе нужно, чтобы он сказал.
Чтобы изменять цвет labels оси X, ты должен делать это через свойство fontColor
Ticks
options: {
scales: {
xAxes: [{
ticks:{
fontColor:"orange" // <-- Color de labels eje X
Demo:
window.addEventListener('load', function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'apples',
data: [12, 19, 3, 17, 6, 3, 7],
backgroundColor: "rgba(153,255,51,0.6)"
}, {
label: 'oranges',
data: [2, 29, 5, 5, 2, 3, 10],
backgroundColor: "rgba(255,153,0,0.6)"
}]
},
options: {
legend: {
display: false // Ocultar legendas
},
scales: {
xAxes: [{
gridLines:{
color:"rgba(0,255,0,1)",// Eje x color verde
display: false
},
ticks: {
fontColor: "orange" // Cambiar color de labels
}
}],
yAxes: [{
gridLines:{
color:"rgba(255,0,0,1)", // Eje y color rojo
display: false,
}
}]
}
}
});
});
.container {
width: 80%;
margin: 15px auto;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js"></script>
<div class="container">
<div>
<canvas id="myChart"></canvas>
</div>
</div>