0
129
VistasConjunto de datos múltiple de color de fondo de Chartjs
Tengo un script para Chartjs como:
<script type="text/javascript"> var dataname = @Html.Raw(Json.Serialize(ViewBag.performancename)); var dataquo = @Html.Raw(Json.Serialize(ViewBag.performancequo)); var datapo = @Html.Raw(Json.Serialize(ViewBag.performancepo)); var ctx = document.getElementById('canvasx5'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: dataname, datasets: [{ label: 'QUO', fill: true, backgroundColor: [ 'rgba(255, 99, 132, 0.8)' ], borderColor: [ 'rgba(255, 99, 132, 1)' ], borderWidth: 1, data: dataquo } , { label: 'PO', fill: true, backgroundColor: [ 'rgba(75, 192, 192, 0.8)' ], borderColor: [ 'rgba(75, 192, 192, 1)' ], borderWidth: 1, data: datapo }] }, borderWidth: 1, options: { legend: { display: true, } , scales: { xAxes: [{ stacked: false, barPercentage: 0.8, gridLines: { offsetGridLines: true } }], yAxes: [{ stacked: false, ticks: { beginAtZero: true, stepSize: 2, min: 0 } }] } } }); </script> El resultado es algo como:
Los valores para cada var son:
dataname: ['Arif','Choirul','Rexy'] dataquo: [2,2,1] datapo: [0,0,3] Están en el resultado de la Array .
¿Por qué la segunda y la tercera etiqueta aparecen con un color diferente? ¿Hay algún problema con mi guión? Necesito ayuda y consejo por favor.
Gracias.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
En V2, Chart.js no admitía la sustitución automática para los colores de la matriz, por lo que si su matriz es más corta que la longitud de los datos, volverá al color predeterminado para las entradas de datos restantes.
Tienes 3 formas de arreglarlo:
- Eliminando los corchetes para que sea solo un color normal (vea el ejemplo a continuación)
- Proporcionar una matriz llena de colores con la misma longitud que su matriz de datos
- Actualice a V3, aunque hay algunos cambios de frenado importantes, por lo que si desea hacer esto, lea la guía de migración para que pueda cambiar su código correctamente.
<body> <canvas id="canvasx5" width="100" height="100"></canvas> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <script type="text/javascript"> var dataname = ['Arif', 'Choirul', 'Rexy']; var dataquo = [2, 2, 1]; var datapo = [0, 0, 3]; var ctx = document.getElementById('canvasx5'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: dataname, datasets: [{ label: 'QUO', fill: true, backgroundColor: 'rgba(255, 99, 132, 0.8)', borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 1, data: dataquo }, { label: 'PO', fill: true, backgroundColor: 'rgba(75, 192, 192, 0.8)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1, data: datapo } ] }, borderWidth: 1, options: { legend: { display: true, }, scales: { xAxes: [{ stacked: false, barPercentage: 0.8, gridLines: { offsetGridLines: true } }], yAxes: [{ stacked: false, ticks: { beginAtZero: true, stepSize: 2, min: 0 } }] } } }); </script>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta