web-dev-qa-db-fra.com

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

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

J'utilise uniserver comme serveur. Je copie-colle tout mais ça ne marche 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>

Voici ce que j'ai obtenu en consultant la console des outils de développement:

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 ça marche en jsfiddle et pas dans ma section locale.

javascriptd3.jsgraphchartsc3.js
29
JJC

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, à compter 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 possède un espace de noms totalement différent et n'est en aucun cas compatible avec les versions antérieures. La mise à jour vers la v4 est une tâche très simple.

75
Arto Bendiken

C3.js est basé sur D3 v3 et l'erreur se produit lorsque vous essayez de l'exécuter avec D3 v4.

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

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

Sur D3 v4, d3.scale.category10().range() devrait être utilisé comme d3.scaleOrdinal(d3.schemeCategory10), mais comme C3.js ne peut pas être exécuté sur D3 v4, cela ne signifie rien de changer cette partie du code uniquement.

Si vous avez besoin de travailler avec D3 v4 +, essayez https://naver.github.io/billboard.js/ .

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

7
Jae Sung Park

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 version correcte de C3 et vous ne devriez pas voir cette erreur.

0
BryanH