Я тестирую некоторые библиотеки, и теперь я использую Chartjs и хочу создать гистограмму, и на этом графике я хочу, чтобы у каждого бара было значение позиции на х и легенда для него.
Примерно так: https://codepen.io/mmoskorz/pen/maPExb,, но в этом случае график оставил место для других баров.
var ctx = document.getElementById("mybarChart").getContext("2d");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['1', '2', '3'],
datasets: [{
label: 'Candidate A Votes',
backgroundColor: "#000080",
data: [90,0,0]
}, {
label: 'Candidate B Votes2',
backgroundColor: "#d3d3d3",
data: [0,70,0]
}, {
label: 'Candidate C Votes3',
backgroundColor: "#add8e6",
data: [0,0,45]
}]
},
options: {
legend: {
display: true,
position: 'top',
labels: {
fontColor: "#000080",
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Только одна позиция X не удовлетворяет моей проблеме: https://codepen.io/mmoskorz/pen/aPNmNx
var ctx = document.getElementById("mybarChart").getContext("2d");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['1'],
datasets: [{
label: 'Candidate A Votes',
backgroundColor: "#000080",
data: [90]
}, {
label: 'Candidate B Votes2',
backgroundColor: "#d3d3d3",
data: [70]
}, {
label: 'Candidate C Votes3',
backgroundColor: "#add8e6",
data: [45]
}]
},
options: {
legend: {
display: true,
position: 'top',
labels: {
fontColor: "#000080",
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Я пытался присвоить значения x и y, но не сработал: https://codepen.io/mmoskorz/pen/OrNRXp
var ctx = document.getElementById("mybarChart").getContext("2d");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'Candidate A Votes',
backgroundColor: "#000080",
data: [{x:90, y:1}]
}, {
label: 'Candidate B Votes2',
backgroundColor: "#d3d3d3",
data: [{x:70, y:2}]
}, {
label: 'Candidate C Votes3',
backgroundColor: "#add8e6",
data: [{x:45, y:3}]
}]
},
options: {
legend: {
display: true,
position: 'top',
labels: {
fontColor: "#000080",
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});