0
303
Vistas¿Cómo puedo mantener las líneas verticales debajo de la línea de la regla horizontal en chartjs?
Versión de Chartjs: 3.7.0 (¿algún gurú que sugiera otra versión? ¡Comenta abajo!)
tengo este codigo:
<script> new Chart(document.getElementById("line-chart"), { type: 'line', data: { labels: [1800,1850,1900], datasets: [{ data: [86,114,106], label: "Africa", borderColor: "#3e95cd", fill: false }, { data: [282,350,411], label: "Asia", borderColor: "#8e5ea2", fill: false }, { data: [168,170,178], label: "Europe", borderColor: "#3cba9f", fill: false }, { data: [40,20,10], label: "Latin America", borderColor: "#e8c3b9", fill: false }, { data: [6,3,2], label: "North America", borderColor: "#c45850", fill: false } ] }, options: { title: { display: true, text: 'World population per region (in millions)' } } }); </script>y este gráfico se ve así:
Pregunta : ¿Cómo puedo mantener las líneas que he marcado con un círculo rojo en la imagen de abajo pero eliminar las líneas que he marcado con un círculo amarillo? (Quiero eliminar todas las líneas verticales).
Quiero que se vea (en cuanto a la estructura alámbrica) así:
3 Respuestas
Responde la pregunta0
Pasas opciones> escalas> x> cuadrícula> mostrar: falso
Ejemplo:
let myChart = new Chart(ctx, { type: 'line', data: data, options: { scales: { x: { grid:{ display:false } }, // will hide vertical gridlines y: { grid:{ display:true } } // will show horizontal gridlines }, } });Entonces en tu caso:
<script> new Chart(document.getElementById("line-chart"), { type: 'line', data: { labels: [1800,1850,1900], datasets: [{ data: [86,114,106], label: "Africa", borderColor: "#3e95cd", fill: false }, { data: [282,350,411], label: "Asia", borderColor: "#8e5ea2", fill: false }, { data: [168,170,178], label: "Europe", borderColor: "#3cba9f", fill: false }, { data: [40,20,10], label: "Latin America", borderColor: "#e8c3b9", fill: false }, { data: [6,3,2], label: "North America", borderColor: "#c45850", fill: false } ] }, options: { title: { display: true, text: 'World population per region (in millions)' }, scales: { x: { grid:{ display:false } }, y: { grid:{ display:true } } } } }); </script>0
Puede ocultar las líneas de cuadrícula de xAxes . Consulte la documentación aquí . Ejemplo:
var myChart = new Chart(document.getElementById("myChart"), { type: "line", data: { labels: [1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900], datasets: [{ data: [86, 114, 106, 86, 114, 106, 86, 114, 106, 86, 114, 106], label: "Africa", borderColor: "#3e95cd", fill: false }, { data: [282, 350, 411, 282, 350, 411, 282, 350, 411, 282, 350, 411], label: "Asia", borderColor: "#8e5ea2", fill: false }, { data: [168, 170, 178, 168, 170, 178, 168, 170, 178, 168, 170, 178], label: "Europe", borderColor: "#3cba9f", fill: false }, { data: [40, 20, 10, 40, 20, 10, 40, 20, 10, 40, 20, 10, 40, 20, 10], label: "Latin America", borderColor: "#e8c3b9", fill: false }, { data: [6, 3, 2, 6, 3, 2, 6, 3, 2, 6, 3, 2, 6, 3, 2], label: "North America", borderColor: "#c45850", fill: false }] }, options: { scales: { xAxes: [{ gridLines: { color: "rgba(0, 0, 0, 0)", } }], } } }); <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5/dist/chartjs-plugin-zoom.min.js"></script> <html> <body> <div class="myChartDiv" style="width: 600px;"> <canvas id="myChart"></canvas> </div> </body> </html> Si solo desea ocultar las líneas de cuadrícula dentro del área de dibujo, puede configurar drawOnChartArea: false , vea esta excelente respuesta a continuación.
0
Puede configurar drawOnChartArea en las opciones de cuadrícula en falso, además, su título no funciona ya que está configurado en el espacio de nombres incorrecto, debe configurarse en la sección de plugins :
const options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'orange' } ] }, options: { scales: { y: { grid: { drawOnChartArea: false } }, x: { grid: { drawOnChartArea: false } }, }, plugins: { title: { display: true, text: 'Title of the chart' } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script> </body>