Question

我从jsfiddle（https://jsfiddle.net/varunoberoi/mcd6ucge）尝试了这个c3.js代码，但它似乎不能在我的localhost中工作。

我使用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>

当我查看开发者工具＆＃39;控制台是这样的：

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

我尝试了不同版本的c3.js但没有。这很奇怪，因为它在jsfiddle工作而不是在我当地工作。

Answer 1

我通过从D3.js v4（4.1.1）降级到v3（3.5.17），解决了另一个项目中完全相同的JavaScript错误。

事实证明，截至2016年7月的C3.js does not support D3.js v4：

它绝对无法与[D3.js] 4.0一起使用。 D3 v4具有完全不同的命名空间，绝不向后兼容。更新到v4是一项非常重要的任务。

Answer 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 +支持相同的界面。

Answer 3

问题是您使用的C3版本不支持您正在使用的版本：

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

只需确保使用正确版本的C3，就不应该看到此错误。

C3JS - 无法阅读属性＆＃39; category10＆＃39;未定义的

3 个答案: