30 votes

C3JS - Impossible de lire la propriété 'category10' de non défini

J'ai essayé ce c3.js code de jsfiddle (https://jsfiddle.net/varunoberoi/mcd6ucge) mais il ne semble pas fonctionner dans mon localhost.

Je suis en utilisant uniserver que mon serveur. - Je copier-coller de tout, mais ça ne fonctionne pas.

<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>

Ce que j'ai eu quand j'ai vérifier les Outils de développement' de la console est ceci:

c3.js:5783 Uncaught TypeError: Cannot read property 'category10' of undefined

J'ai essayé différentes versions de c3.js mais rien. C'est bizarre, parce que c'est de travailler dans jsfiddle et pas dans mon local.

75voto

Arto Bendiken Points 591

J'ai résolu exactement la même erreur JavaScript sur un autre projet en rétrogradant de D3.js v4 (4.1.1) à v3 (3.5.17).

Il s'avère que C3.js, à partir de juillet 2016, ne prend pas en charge D3.js v4 :

Cela ne fonctionnera certainement pas tel quel avec [D3.js] 4.0. D3 v4 a un espace de noms totalement différent et n'est en aucun cas rétrocompatible. La mise à jour vers la v4 est une tâche très simple.

7voto

Jae Sung Park Points 625

C'est parce que, C3.js est basé sur D3 v3, et l'erreur se produit lorsque vous essayez d'exécuter avec D3 v4.

L'erreur se produit sur les dessous de la ligne de code:

pattern = notEmpty(config.color_pattern) ?
    config.color_pattern : d3.scale.category10().range()

Sur D3 v4, d3.scale.category10().range() doit être utilisé en tant que d3.scaleOrdinal(d3.schemeCategory10), mais comme C3.js ne peut pas être exécuté sur D3 v4 c'est vide de sens de changer cette partie de code seulement.


Si quelqu'un à besoin de travailler avec D3 v4+, essayez https://naver.github.io/billboard.js/.

billboard.js est un fork du projet de C3.js, ayant la même interface avec D3 v4+ support.

1voto

BryanH Points 2725

Le problème est que la version de C3 que vous utilisez ne prend pas en charge la version que vous utilisez:

 D3 ver | requires C3 ver
3.x    |  0.4
4.x    |  0.5
5.x    |  0.6
 

Assurez-vous simplement que vous utilisez la bonne version de C3 et vous ne devriez pas voir cette erreur.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X