Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

I tried this c3.js code from jsfiddle (https://jsfiddle.net/varunoberoi/mcd6ucge) but it doesn't seem to work in my localhost.

I'm using uniserver as my server. I copy-paste everything but it's not working.

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

What I got when I check the Developer Tools' console is this:

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

I tried different versions of c3.js but nothing. It's weird because it's working in jsfiddle and not in my local.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
398 views
Welcome To Ask or Share your Answers For Others

1 Answer

I solved the exact same JavaScript error on another project by downgrading from D3.js v4 (4.1.1) to v3 (3.5.17).

It turns out that C3.js, as of July 2016, does not support D3.js v4:

It definitely will not work as-is with [D3.js] 4.0. D3 v4 has a totally different namespace and is in no way backwards compatible. Updating to v4 is a very non-trivial task.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...