C3JS - Невозможно прочитать свойство 'category10' из undefined

Я пробовал этот код c3.js из jsfiddle (https://jsfiddle.net/varunoberoi/mcd6ucge), но он не работает в моем локальном хосте.

Я использую uniserver как мой сервер. Я копирую-вставляю все, но не работает.

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

Что я получил, когда проверяю консоль Developer Tools, это:

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

Я пробовал разные версии c3.js, но ничего. Это странно, потому что он работает в jsfiddle, а не в моем локальном.

Ответ 1

Я решил точно такую же ошибку JavaScript в другом проекте, понизив с D3.js v4 (4.1.1) до v3 (3.5.17).

Оказывается, что C3.js, по состоянию на июль 2016 года, не поддерживает D3.js v4:

Он определенно не будет работать с [D3.js] 4.0. D3 v4 имеет совершенно другое пространство имен и никоим образом не поддерживает обратную совместимость. Обновление v4 - очень нетривиальная задача.

Ответ 2

Это потому, что C3.js основан на D3 v3, и ошибка возникает при попытке запуска с D3 v4.

Ошибка возникает в нижней строке кода:

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

https://github.com/c3js/c3/blob/master/src/color.js#L7

В D3 v4, d3.scale.category10().range() следует использовать как d3.scaleOrdinal(d3.schemeCategory10), но поскольку C3.js не может быть запущен на D3 v4, это бессмысленно изменяет только эту часть кода.

Если кому-то нужно работать с D3 v4+, попробуйте https://naver.github.io/billboard.js/.

billboard.js - это разветвленный проект C3.js, имеющий тот же интерфейс с поддержкой D3 v4+.

Ответ 3

Проблема в том, что версия C3, которую вы используете, не поддерживает версию, которую вы используете:

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

Просто убедитесь, что вы используете правильную версию C3, и вы не должны видеть эту ошибку.