javascript - C3JS-No se puede leer la propiedad ''category10'' de undefined
d3.js graph (3)
Intenté este código c3.js de jsfiddle ( https://jsfiddle.net/varunoberoi/mcd6ucge ) pero parece que no funciona en mi servidor local.
Estoy usando uniserver como mi servidor. Copio y pego todo, pero no funciona.
<html>
<head>
<!-- CSS -->
<link href="css/c3.css" rel="stylesheet" type="text/css" />
<!-- JAVASCRIPT -->
<script src="js/d3.min.js" type="text/javascript"></script>
<script src="js/c3.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){
var chart = c3.generate({
data: {
columns: [
[''data1'', 300, 350, 300, 0, 0, 0],
[''data2'', 130, 100, 140, 200, 150, 50]
],
types: {
data1: ''area'',
data2: ''area-spline''
}
},
axis: {
y: {
padding: {bottom: 0},
min: 0
},
x: {
padding: {left: 0},
min: 0,
show: false
}
}
});
}
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
Lo que obtuve cuando reviso la consola de Developer Tools es esto:
c3.js:5783 Uncaught TypeError: Cannot read property ''category10'' of undefined
Probé diferentes versiones de c3.js pero nada. Es extraño porque está funcionando en jsfiddle y no en mi local.
El problema es que la versión de C3 que está utilizando no es compatible con la versión que está utilizando:
D3 ver | requires C3 ver
3.x | 0.4
4.x | 0.5
5.x | 0.6
Simplemente asegúrese de estar usando la versión correcta de C3 y no debería ver este error.
Es porque, C3.js se basa en D3 v3, y el error ocurre cuando intentas ejecutar con D3 v4.
El error ocurre en la línea de código siguiente:
pattern = notEmpty(config.color_pattern) ?
config.color_pattern : d3.scale.category10().range()
En D3 v4, d3.scale.category10().range() debe usar como d3.scaleOrdinal(d3.schemeCategory10) , pero como C3.js no se puede ejecutar en D3 v4, no tiene sentido cambiar esta parte del código solamente.
Si alguien necesita trabajar con D3 v4 +, intente https://naver.github.io/billboard.js/ .
billboard.js es un proyecto bifurcado de C3.js, que tiene la misma interfaz con soporte D3 v4 +.
Resolví exactamente el mismo error de JavaScript en otro proyecto al degradar de D3.js v4 (4.1.1) a v3 (3.5.17).
Resulta que C3.js, a partir de julio de 2016, no es compatible con D3.js v4 :
Definitivamente no funcionará como está con [D3.js] 4.0. D3 v4 tiene un espacio de nombres totalmente diferente y de ninguna manera es compatible con versiones anteriores. La actualización a v4 es una tarea muy no trivial.