【问题标题】:Live code examples of NVD3 does not accept my JSONNVD3 的实时代码示例不接受我的 JSON
【发布时间】:2016-06-12 00:46:07
【问题描述】:

我正在尝试在 NVD3 的实时代码编辑器中将我的 JSON 文件用于堆积面积图:http://nvd3.org/livecode/index.html#codemirrorNav 这是我的 JSON 文件:

[{"key":"SSB","values":[]},{"key":"GEN","values":[]},{"key":"LYM","values":[]},{"key":"LUD","values":[]},{"key":"GCC","values":[[1433116800000,1],[1434326400000,2],[1434499200000,2],[1434931200000,1],[1435536000000,1],[1437436800000,1],[1437523200000,1],[1439164800000,1],[1439251200000,1],[1439942400000,1],[1440288000000,1],[1465257600000,3]]},{"key":"MAC","values":[[1465257600000,1]]},{"key":"MMB","values":[[1420156800000,2],[1420416000000,1],[1420502400000,4],[1420588800000,1],[1420675200000,2],[1420761600000,1],[1421020800000,2],[1421107200000,6],[1421193600000,3],[1421280000000,3],[1421366400000,2],[1421625600000,7],[1421712000000,4],[1421798400000,1],[1421884800000,3],[1421971200000,4],[1422230400000,3],[1422316800000,5],[1422403200000,3],[1422489600000,3],[1422576000000,6],[1422921600000,8],[1423008000000,10],[1423094400000,8],[1423180800000,17],[1423267200000,1],[1423353600000,2],[1423440000000,3],[1423526400000,2],[1423699200000,5],[1423785600000,3],[1424131200000,6],[1424217600000,4],[1424304000000,5],[1424390400000,2],[1424563200000,1],[1424736000000,2],[1424822400000,2],[1424995200000,8],[1425340800000,7],[1425427200000,4],[1425513600000,2],[1425600000000,5],[1425772800000,1],[1425859200000,3],[1425945600000,4],[1426032000000,6],[1426118400000,3],[1426204800000,2],[1426377600000,1],[1426550400000,5],[1426636800000,2],[1426723200000,1],[1426809600000,14],[1426982400000,1],[1427068800000,1],[1427155200000,4],[1427241600000,2],[1427328000000,8],[1427414400000,13],[1427500800000,1],[1427587200000,1],[1428624000000,1],[1429833600000,2],[1436313600000,1],[1458000000000,1],[1458864000000,1],[1465257600000,3]]}]

我用我的 JSON 替换示例 JSON,NVD3 识别关键元素但不识别数据。

我很困惑,因为我使用在线 JSON 格式化程序查看了两个 JSON 文件的结构,但没有发现差异。我很确定我犯了一个明显的错误。我将非常感谢社区的反馈!谢谢!

编辑:

我想要实现的图表:

【问题讨论】:

    标签: json d3.js nvd3.js


    【解决方案1】:

    问题是 nvd3 期望的 JSON 是这种形式:

    values:[{x:0, y:10},{x:1, y:20} ... ]
    

    你传递的是这种形式

    ,{"key":"GCC","values":[[1433116800000,1],[1434326400000,2], ...
    

    这就是它不工作的原因:

    修复:您需要将 JSON 更改为预期格式:

    var myData = [{
        "key": "SSB",
        "values": []
      }, {
        "key": "GEN",
        "values": []
      }, {
        "key": "LYM",
        "values": []
      }, {
        "key": "LUD",
        "values": []
      }, {
        "key": "GCC",
        "values": [
          [1433116800000, 1],
          [1434326400000, 2],
          [1434499200000, 2],
          [1434931200000, 1],
          [1435536000000, 1], ...
      //change into the format expected by nvd3
      myData.forEach(function(d){
        d.values = d.values.map(function(value){
          return {x:value[0], y:value[1]};
        })
      });
    

    工作代码here

    【讨论】:

    • 非常感谢!我让 NVD3 工作。但是,数据格式不适用于stackedArea 图。由于某种原因,链接重定向到折线图。我想知道您是否可以查看我正在尝试实现的图表的编辑。我将不胜感激!同时,我会学习你的例子!谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-11-14
    • 2014-10-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多