#javascript #chart.js
#javascript #chart.js
Вопрос:
Я собираюсь разработать следующий тип диаграммы.
До сих пор я добился следующего результата:
Но у меня есть следующие проблемы, и я понятия не имею, как их выполнить.
-
У дней есть 2 гистограммы в виде стека. Легенда для этих 2 графиков одинакова, поэтому я ищу, чтобы она не отображала дублирование вверху. Они представляют собой процент.
-
У каждого столбца есть имя: «Поворот 1» и «Поворот 2», поэтому я хотел бы, чтобы они могли отображаться при наведении курсора мыши на диаграммы вместе с их соответствующим значением.
-
Поместите справа от «Оси Y» другой текст, но он представляет целое число, которое представлено черной линией.
Мой исходный код выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
<script src="https://www.chartjs.org/dist/2.9.4/Chart.min.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 barChartData = {
labels: [
"Día 1",
"Día 2",
"Día 3",
"Día 4",
"Día 5",
"Día 6",
"Día 7",
"Día 8",
"Día 9",
"Día 10",
],
datasets: [
{
type: "line",
label: "Toneladas Provisionales",
borderColor: "#000000",
backgroundColor: "#000000",
borderWidth: 2,
fill: false,
data: [12.8, 28.53, 50.34, 50.87, 51.51, 53.12, 54.59],
},
{
label: "% UTILIZACION",
backgroundColor: "#3393df",
stack: "Turno 1",
data: [12.8, 28.53, 50.34, 50.87, 51.51, 53.12, 54.59],
},
{
label: "% COLAS LARGAS",
backgroundColor: "#e88967",
stack: "Turno 1",
data: [59, 10, 12, 8, 6, 17, 6],
},
{
label: "% COLAS DESCARGA",
backgroundColor: "#9d81bd",
stack: "Turno 1",
data: [10, 23, 13, 12, 8, 7, 11],
},
{
label: "% TALLER",
backgroundColor: "#b3b3b3",
stack: "Turno 1",
data: [19, 16, 10, 19, 18, 16, 11],
},
{
label: "% STAND BY PARALIZACIONES",
backgroundColor: "#409640",
stack: "Turno 1",
data: [0, 23, 14, 11, 16, 7, 18],
},
{
label: "% TURNOS 0 PRODUCCION",
backgroundColor: "#ffdf00",
stack: "Turno 1",
data: [0, 0, 0, 0, 0, 0, 0],
},
{
label: "% UTILIZACION",
backgroundColor: "#3393df",
stack: "Turno 2",
data: [12.8, 28.53, 50.34, 50.87, 51.51, 53.12, 54.59],
},
{
label: "% COLAS LARGAS",
backgroundColor: "#e88967",
stack: "Turno 2",
data: [59, 10, 12, 8, 6, 17, 6],
},
{
label: "% COLAS DESCARGA",
backgroundColor: "#9d81bd",
stack: "Turno 2",
data: [10, 23, 13, 12, 8, 7, 11],
},
{
label: "% TALLER",
backgroundColor: "#b3b3b3",
stack: "Turno 2",
data: [19, 16, 10, 19, 18, 16, 11],
},
{
label: "% STAND BY PARALIZACIONES",
backgroundColor: "#409640",
stack: "Turno 2",
data: [0, 23, 14, 11, 16, 7, 18],
},
{
label: "% TURNOS 0 PRODUCCION",
backgroundColor: "#ffdf00",
stack: "Turno 2",
data: [0, 0, 0, 0, 0, 0, 0],
},
],
};
var ctx = document.getElementById("canvas").getContext("2d");
var canvas = new Chart(ctx, {
type: "bar",
data: barChartData,
options: {
title: {
display: true,
text:
"Detalle de Tiempos de Utilización de Flota y Toneladas Transportadas por Turno del 1 al:",
},
legend: {
display: true,
},
tooltips: {
enabled: true,
},
responsive: true,
scales: {
xAxes: [
{
stacked: true,
},
],
yAxes: [
{
stacked: true,
ticks: {
min: 0,
max: this.max, // Your absolute max value
callback: function (value) {
return ((value / this.max) * 100).toFixed(0) "%"; // convert it to percentage
},
},
scaleLabel: {
display: true,
labelString: "Porcentaje",
},
},
],
},
},
});
</script>
</body>
</html>