Ich habe eine Combo Dual-Balkendiagramm mit chartjs erstellt. Mein Code ist unten angegeben. Das Balken-Kombinations-Dual-Diagramm funktioniert gut, aber ich hatte eine Anforderung, eine Linie für das grüne Farb-Balkendiagramm zu setzen, das alle seine oberen Mittelpunkte verbindet. Ich habe ein Liniendiagramm gezeichnet, das den grünen Graphen verbindet, aber das Problem, dem ich gegenüberstehe, ist, dass der Liniendiagrammpunkt nicht in der oberen Mitte des grünen Balkendiagramms liegt, wie unten gezeigt.Liniendiagramm-Spot in der oberen Mitte des Balkendiagramms
Kann jemand bitte sagen Sie mir, wie die Linie Fleck in der oberen Mitte des Balkendiagramms machen
html
<canvas id="canvas"></canvas>
js
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
type: 'bar',
label: "Visitor",
data: [10, 59, 340, 521, 450, 200, 195],
fill: false,
backgroundColor: "rgba(220,220,220,0.5)",
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C'
}, {
type: 'bar',
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C'
}, {
type:'line',
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F'
} ]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false
},
labels: {
show: true,
}
}],
yAxes: [{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines:{
display: false
},
labels: {
show:true,
}
}, {
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridLines:{
display: false
},
labels: {
show:true,
}
}]
}
}
});
};
können wir das Liniendiagramm Label und seine Details ausblenden, wenn die Maus über –
okay, immer noch, wenn Sie das Diagramm vergrößern oder verkleinern das Midpint uns weggehen zum Rand –
@AlexMan Dies ist aufgrund eines Problems mit der Reaktionsfähigkeit von die Grafik. Wenn Sie in Ihren Chart-Optionen "responsive: false" setzen, wird das Problem behoben (Sie müssen auch eine 'width' und eine' height' auf Ihrer '' – tektiv