0
Einfaches Setup: Ich habe eine RoR-Anwendung und ein ChartJS-Liniendiagramm. Ich möchte ein Bild an einem bestimmten Ort, aber auch Text hinzufügen. Im Verlauf der RoR-Anwendung werden die Antworten der Benutzer nach einiger Zeit angezeigt. Später wird die Antwort von zwei Personen gezeigt, die dem Durchschnitt näher sind. In meinem Fall muss ich nur wissen, wie ein Bild innen gerendert werden könnte.Chart JS Line einfügen Bild
Picture What it should look like
Hier ist meine eigentliche Code:
var points = [];
var data = {
datasets: [{
label: 'Antworten',
data: points,
radius: 6,
borderColor: "#000000",
borderWidth: 2,
backgroundColor: "#FF0000"
},
{
label: "",
fill: false,
lineTension: 0,
backgroundColor: "rgba(0,0,0,1)",
borderColor: "rgba(0,0,0,1)",
borderCapStyle: 'butt',
borderDash: [0],
borderDashOffset: 0.0,
showLine: true,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "rgba(1,0,0,1)",
pointBorderWidth: 8,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(0,0,0,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointStyle: "circle",
pointHitRadius: 10,
data: [{
x: 0,
y: 0
},{
x: 100,
y: 0
}],
borderColor: "#000000",
borderWidth: 5,
backgroundColor: "#FF0000"
}
]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, {
type: 'line',
data,
options: {
legend: {
display: false
},
showLines: false,
scales: {
xAxes: [{
type: 'linear',
gridLines: {
display: false
},
position: 'bottom',
ticks: {
max: 100,
min: 0,
stepSize: 10
}
}],
yAxes: [{
display: false,
ticks: {
max: 1,
min: 0,
stepSize: 1
}
}]
}
}
});
};