0
242
VistasEl gráfico de barras de Chartjs se recortó
Tengo un gráfico de barras y quería apilar la yellow bar sobre la barra purple y pink bar . De alguna manera, los xAxes de la yellow bar comienzan/terminan en la esquina izquierda/derecha, por lo que quedó recortada en cada lado. Quiero que esté en el centro como en value = 3 en la imagen a continuación:
aquí está mi código:
var ctx = document.getElementById('myChart'); var mixedChart = new Chart(ctx, { type: 'bar', data: { labels: ['1', '2', '3', '4', '5'], datasets: [ { label: 'Total Trip', yAxisID: 'Total-Trip', data: [1000, 1350, 1230, 940, 640], type: 'line', backgroundColor: ['transparent'] }, { label: 'Orang', xAxisID: 'x-B', yAxisID: 'Orang-y', data: [50, 46, 44, 46, 49], backgroundColor: 'rgba(255, 206, 86)', barThickness: 30, clip: { left: 50, right: 50 } }, { label: 'Travel Costs', xAxisID: 'x-A', yAxisID: 'Orang-y', data: [100, 96, 84, 76, 69], backgroundColor: 'rgba(255, 99, 132)', }, { label: 'Travel Costs USD', xAxisID: 'x-A', yAxisID: 'Orang-y', data: [150, 106, 94, 96, 99], backgroundColor: 'rgba(155, 19, 232)', } ] }, options: { responsive: true, maintainAspectRatio: false, plugins: { labels: { render: 'value' } }, scales: { yAxes: [ { id: 'Total-Trip', display: false, type: 'linear', position: 'right', ticks: { min: 0, } }, { id: 'Orang-y', stacked: false, ticks: { beginAtZero: true }, } ], xAxes: [ { id: 'x-A', }, { id: 'x-B', stacked: true, clip: { left: 50, right: 50 } }, ] } } }); o puede ver aquí, haga clic en Show Files y luego elija bar-side-to-side.html
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Creo que las propiedades de offset y display ayudarán:
{ id: 'x-B', offset:true, display:false }, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1> Transaksi CBT - Non CBT </h1> <div class="panel"> <canvas id="myChart" width="400" height="400"></canvas> </div> <style> .panel { height: 400px; width: 400px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script> <script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js" crossorigin="anonymous" referrerpolicy="no-referrer"> </script> <script type="text/javascript"> var ctx = document.getElementById('myChart'); var mixedChart = new Chart(ctx, { type: 'bar', data: { labels: ['1', '2', '3', '4', '5'], datasets: [{ label: 'Total Trip', yAxisID: 'Total-Trip', data: [1000, 1350, 1230, 940, 640], type: 'line', backgroundColor: ['transparent'] }, { label: 'Orang', xAxisID: 'x-B', yAxisID: 'Orang-y', data: [50, 46, 44, 46, 49], backgroundColor: 'rgba(255, 206, 86)', barThickness: 30, }, { label: 'Travel Costs', xAxisID: 'x-A', yAxisID: 'Orang-y', data: [100, 96, 84, 76, 69], backgroundColor: 'rgba(255, 99, 132)', }, { label: 'Travel Costs USD', xAxisID: 'x-A', yAxisID: 'Orang-y', data: [150, 106, 94, 96, 99], backgroundColor: 'rgba(155, 19, 232)', } ] }, options: { layout: { margin: 20 }, responsive: true, maintainAspectRatio: false, plugins: { labels: { render: 'value' } }, scales: { yAxes: [{ id: 'Total-Trip', display: false, type: 'linear', position: 'right', ticks: { beginAtZero: true } }, { id: 'Orang-y', stacked: false, ticks: { beginAtZero: true } }, ], xAxes: [{ id: 'x-A', }, { id: 'x-B', offset: true, display: false }, ] } } }); </script> </body> </html>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta