HTML - Graficas en HTML con Chart.js

 
Vista:

Graficas en HTML con Chart.js

Publicado por Oscar Uriel Andrade Solis (2 intervenciones) el 09/06/2020 22:43:34
Hola buen dia solo para aclarar una duda alguien que me pueda ayudar a como poder hacer mas pequeña mi grafica estoy utilizando la libreria chart e buscado en muchos sitios web y no hay nada de informacion sobre como hacer eso muchas gracias de antemano
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Graficas en HTML con Chart.js

Publicado por Oscar Uriel Andrade Solis (2 intervenciones) el 09/06/2020 23:12:00
La grafica si pude realizarla pero el problema es que es demasiada grande y me gustaria poderla hacerla mas chica y nose que procedimiento es el que sigue ahora para hacerla mas chica
PD: La grafica si la hice con Charts.js
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 1.453
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Graficas en HTML con Chart.js

Publicado por joel (460 intervenciones) el 10/06/2020 12:25:38
No se si hay otra manera, pero una es hacer referencia al parentNode... algo así... fíjate en las lineas 18 y 19:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
 
<body>
 
    <canvas id="speedChart"></canvas>
 
</body>
</html>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script>
 
var speedCanvas = document.getElementById("speedChart");
speedCanvas.parentNode.style.width = '400px';
speedCanvas.parentNode.style.height = '200px';
 
Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
 
var speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [{
    label: "Car Speed (mph)",
    data: [0, 59, 75, 20, 20, 55, 40],
  }]
};
 
var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  }
};
 
var lineChart = new Chart(speedCanvas, {
  type: 'line',
  data: speedData,
  options: chartOptions
});
 
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar