it-swarm.com.de

C3JS - Eigenschaft 'category10' von undefined kann nicht gelesen werden

Ich habe diesen c3.js-Code aus jsfiddle ( https://jsfiddle.net/varunoberoi/mcd6ucge ) ausprobiert, scheint aber in meinem localhost nicht zu funktionieren.

Ich benutze uniserver als meinen Server. Ich kopiere alles, aber es funktioniert nicht. 

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

Wenn ich die Konsole der Developer Tools überprüfe, habe ich Folgendes:

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

Ich habe verschiedene Versionen von c3.js ausprobiert, aber nichts. Es ist komisch, weil es in jsfiddle und nicht in meinem lokalen arbeitet.

29
JJC

Ich habe den gleichen JavaScript-Fehler in einem anderen Projekt behoben, indem ich von D3.js v4 (4.1.1) auf v3 (3.5.17) heruntergestuft wurde.

Es stellt sich heraus, dass C3.js ab Juli 2016 D3.js v4 nicht unterstützt :

Mit [D3.js] 4.0 funktioniert es definitiv nicht wie es ist. D3 v4 hat einen völlig anderen Namensraum und ist keinesfalls abwärtskompatibel. Das Aktualisieren auf Version 4 ist eine sehr einfache Aufgabe.

75
Arto Bendiken

Dies liegt daran, dass C3.js auf D3 v3 basiert und der Fehler auftritt, wenn Sie versuchen, mit D3 v4 auszuführen.

Der Fehler tritt in der folgenden Codezeile auf:

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

Auf D3 v4 sollte d3.scale.category10().range() als d3.scaleOrdinal(d3.schemeCategory10) verwendet werden. Da C3.js jedoch nicht unter D3 v4 ausgeführt werden kann, ist es sinnlos, nur diesen Teil des Codes zu ändern.


Wenn Sie mit D3 v4 + arbeiten möchten, probieren Sie https://naver.github.io/billboard.js/ .

billboard.js ist ein gegabeltes Projekt von C3.js, das dieselbe Schnittstelle wie D3 v4 + unterstützt.

7
Jae Sung Park

Das Problem ist, dass die Version von C3, die Sie verwenden, die von Ihnen verwendete Version nicht unterstützt:

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

Stellen Sie einfach sicher, dass Sie die richtige Version von C3 verwenden, und Sie sollten diesen Fehler nicht sehen.

0
BryanH