1
Wenn ich den folgenden Code ausführen, wird Dual-Axis Liniendiagramm ausgeführt. wie man das Label oder den Text in beiden yaxis (linke Seite und rechte Seite) einstellt.Text in beiden Y-Achse in Dual-Achsen-Diagramm anzeigen js
Ich bin mit https://nnnick.github.io/Chart.js/docs-v2/#line-chart-chart-options
<!doctype html>
<html>
<head>
<title>Line Chart Multiple Axes</title>
<script src="../dist/Chart.bundle.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
<script>
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [50, 85, 56, 50, 60, 70, 80],
yAxisID: "y-axis-1",
borderColor :"#0ad4e6"
}, {
label: "My Second dataset",
data: [35, 45, 75, 40, 55, 73, 82],
yAxisID: "y-axis-2",
borderColor :"#f6c63e"
}]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
responsive: true,
hoverMode: 'label',
stacked: false,
title:{
display:false,
text:'Chart.js Line Chart - Multi Axis'
},
animation:{
duration:0
},
legend: {
display:false,
position: 'top',
},
scales: {
xAxes: [{
display: true,
gridLines: {
offsetGridLines: false
}
}],
yAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "left",
id: "y-axis-1",
}, {
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "right",
id: "y-axis-2",
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}],
}
}
});
};
</script>
</body>
</html>
Need Gefällt Ihnen dieses 