C3 js无法读取属性'宽度'的未定义

C3 js Cannot read property 'width' of undefined

本文关键字：未定义 宽度 属性 js 读取 C3      更新时间：2023-09-26

我第一次尝试设置C3图表。

我在他们的官方网站上遵循了这个例子，得到了以下html:

<section class="panel panel-default">
    <header class="panel-heading font-bold">C3 Test</header>
    <section class="panel-body">
        <div id="chart"></div>
    </section>
</section>

为此，我有以下javascript：

    var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        axes: {
            data2: 'y2'
        },
        types: {
            data2: 'bar'
        }
    },
    axis: {
        y: {
            label: {
                text: 'Y Label',
                position: 'outer-middle'
            },
            tick: {
                format: d3.format("$,") // ADD
            }
        },
        y2: {
            show: true,
            label: {
                text: 'Y2 Label',
                position: 'outer-middle'
            }
        }
    }
});

然而，当我运行这个时，我得到了以下错误：

Uncaught TypeError: Cannot read property 'width' of undefined c3.min.js:3

有人知道问题出在哪里吗？

好的，我找到了答案

未捕获的类型错误：无法读取未定义的属性"width"

很明显，你必须等到文档加载或加载页面底部的脚本才能工作。

您还可以在SCRIPT元素上添加defer属性。它指示在加载页面之前不要执行脚本标记的内容。

所以你会有这样的东西：

<!-- Load d3.js and c3.js -->
<script src="c3-0.6.7/c3.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="myscript.js" defer></script>
相关文章：