Question

我真的无法弄清楚这里出了什么问题。我尝试使用JSON数据绘制带有纪元的折线图。

JSON Formatter＆amp; Validator说它是有效的JSON。

Epoch / D3不会渲染图表，而是我得到一个＆＃34; Uncaught TypeError：无法读取属性＆＃39; length＆＃39;未定义＆＃34;在控制台的d3.js中。

我尝试了不同版本的d3，最新版本以及本期中描述的v3.5.17：https://github.com/epochjs/epoch/issues/226

这是我的代码：

<html>

<head>
    <link rel="stylesheet" href="css/epoch.min.css" type="text/css">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/d3.js"></script>
    <script src="js/epoch.js"></script>
</head>

<body>
    <div id="linechart" class="epoch category20" style="width: 700px; height: 250px"></div>
    <script type="text/javascript">
        $('#linechart').epoch({
            type: 'line',
            axes: ['left', 'right', 'bottom'],
            data: [{"label":"LabelA","value":[{"x":1,"y":7163960},{"x":2,"y":7163960},{"x":3,"y":7164484},{"x":4,"y":7164572},{"x":5,"y":7164908},{"x":6,"y":7167360},{"x":7,"y":7176940},{"x":8,"y":7176880},{"x":9,"y":7176880},{"x":1,"y":7209696},{"x":11,"y":7260416},{"x":12,"y":7287716},{"x":13,"y":7288548},{"x":14,"y":7289324},{"x":15,"y":7289324}]},{"label":"LabelB","value":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]},{"label":"LabelC","value":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]}]
        });

    </script>
</body>

Answer 1

快速阅读documentation会向您显示而不是value：

data: [{"label":"LabelA","value":[...

必须是values：

data: [{"label":"LabelA","values":[...

以下是带有更正代码的演示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/css/epoch.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/js/epoch.js"></script>
<div id="linechart" class="epoch category20" style="width: 700px; height: 250px"></div>
<script type="text/javascript">
        var linechart = $('#linechart').epoch({
            type: 'line',
            axes: ['left', 'right', 'bottom'],
            data: [{"label":"LabelA","values":[{"x":1,"y":7163960},{"x":2,"y":7163960},{"x":3,"y":7164484},{"x":4,"y":7164572},{"x":5,"y":7164908},{"x":6,"y":7167360},{"x":7,"y":7176940},{"x":8,"y":7176880},{"x":9,"y":7176880},{"x":1,"y":7209696},{"x":11,"y":7260416},{"x":12,"y":7287716},{"x":13,"y":7288548},{"x":14,"y":7289324},{"x":15,"y":7289324}]},{"label":"LabelB","values":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]},{"label":"LabelC","values":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]}]});
</script>

d3js / epochjs无法读取属性＆＃39;长度＆＃39;未定义的

1 个答案: