javascript - La asignación automática de colores en chart.js 2.x ya no funciona, se usa para trabajar en v. 1.x
charts (1)
Usando Chart.js 1.x podría crear un gráfico circular y obtener los colores asignados automáticamente:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var data = [{"label":"Conservative","value":"5"},{"label":"Democratic","value":"6"}];
var myChart = new Chart(ctx).Pie(data);
</script>
</body>
si hago lo mismo con v 2.x
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");{"label":"Democratic","value":"6"}];
var myChart = new Chart(ctx, {
type: ''pie'',
data: {
labels: ["Conservative", "Democratic"],
datasets: [{
data: [5, 15],
}]
}
});
</script>
</body>
toda la Pie se muestra en gris a menos que especifique los colores manualmente; ¿Me estoy perdiendo de algo? La única pregunta relacionada que he encontrado es esta: colores de relleno aleatorio en Chart.js sin embargo, como se explicó anteriormente, funcionó perfectamente en 1.x, así que me parece extraño que ya no funciona.
Creo que la creación de esquemas de color es toda una ciencia propia. Tiene sentido para mí que algo así se haya quedado fuera de Chart.js, ya que hay objetivos más importantes que perseguir. Todos los colores utilizados en los ejemplos de gráficos en los documentos se definen explícitamente. Y este problema de hace dos meses presenta una respuesta categórica de un miembro de Chart.js de que los colores predeterminados no están disponibles en Chart.js 2. Entonces, tiene tres opciones. La primera opción es hacer algunos colores usted mismo. Supongo que no hubieras hecho la pregunta, si hubieras estado en algo así (sé que los resultados serían horribles si hiciera algo así). La segunda opción es buscar esquemas de colores y generadores de esquemas de colores en línea y elegir algunos esquemas de colores que te agraden. La tercera e interesante opción es buscar una biblioteca JavaScript que pueda producir esquemas de color a voluntad. Hay un par de opciones alternativas. Uno bueno, que está disponible bajo licencias muy permisivas, es el generador de paleta de colores . Puede verlo en acción a lo largo de Chart.js 2 aquí . La muestra también está disponible a continuación:
var ctx = document.getElementById("myChart");
var myData = [12, 19, 3, 5, 2, 3];
var myChart = new Chart(ctx, {
type: ''pie'',
data: {
labels: ["First", "Second", "Third", "Fourth", "Fifth", "Sixth"],
datasets: [{
label: ''# of Votes'',
data: myData,
backgroundColor: palette(''tol'', myData.length).map(function(hex) {
return ''#'' + hex;
})
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<!-- This is a copy of palette.js -->
<script src="https://codepen.io/anon/pen/aWapBE.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Cómo usar la biblioteca se describe aquí . En resumen, puede crear una paleta de 10 colores a partir de un esquema de color específico usando lo siguiente:
var seq = palette(''tol-sq'', 10);
El resultado es una matriz de cadenas hexagonales (por ejemplo, "eee8d5"). Para usarlo cuando Chart.js está esperando colores, puede usar el map para anteponer "#" a cada cadena, como en el ejemplo anterior.