NVD3 图表中的 JSON 数据格式答案

【问题标题】：JSON data format in NVD3 chartNVD3 图表中的 JSON 数据格式
【发布时间】：2014-05-13 23:55:35
【问题描述】：

我在这里有一个用于 NVD3 中的多条形图的图表模板：http://jsfiddle.net/hohenheim/6R7mu/5/

我想要显示以下 JSON 数据：

[{"date": 1396828800, "impressions": 49145385},
{"date": 1396915200, "impressions": 46704447},
{"date": 1397001600, "impressions": 47181000},
{"date": 1397088000, "impressions": 47337965},
{"date": 1397174400, "impressions": 51129266},
{"date": 1397260800, "impressions": 60547397},
{"date": 1397347200, "impressions": 62217077},
{"date": 1397433600, "impressions": 49145385},
{"date": 1397520000, "impressions": 46704447},
{"date": 1397606400, "impressions": 47181000},
{"date": 1397692800, "impressions": 47337965},
{"date": 1397779200, "impressions": 51129266},
{"date": 1397865600, "impressions": 60547397},
{"date": 1397952000, "impressions": 62217077}]

我正在寻找使用我拥有的 JSON 数据（如上所示并且还在小提琴中注释掉），但不知道如何以该 NVD3 图表将接受的格式获取它。该图表目前使用的样本数据对我来说毫无意义。

有没有办法将我的数据转换成 NVD3 可以接受的数据？任何帮助表示赞赏。

【问题讨论】：

必须是NVD3吗？ Google Charts 的数据格式可能更简单。

标签： javascript json nvd3.js

【解决方案1】：

data5 似乎有这种格式：

[
  {key: x, values: VALUES, vAxis: 1},
  {key: x, values: VALUES, vAxis: 1} // and maybe more for more colors
]

而 VALUES 似乎有这种格式：

[
  {x: 0, y: N},
  {x: 1, y: N},
  {x: 2, y: N} // and more for more on the X axis
]

因此，您必须将数据重写为该格式。只是您似乎没有更多来源。你只有一种颜色。是什么让{"date": 1396828800, "impressions": 49145385} 成为其中之一？ date是X轴吗？

假设您的数据顺序是正确的，并且它只有 1 个来源：

data5 = [{key: 'X', values: [], vAxis: 1}]
yourData.forEach(function(el, i) {
  data5[0].values.push({x: i, y: el.impressions});
     // ^ only 1 source/color
                        // ^ incremental X, starting at 0
});

您可能必须以某种方式调整 x 和 y 范围。（也许 vAxis 是一个？）

【讨论】：

我的其他数据源稍微复杂一些，我打算在弄清楚这一点后添加它 - 所以现在只有一种颜色。但是，是的，日期是 x，印象数是 y。我使用 array.map 属性管理了一个很好的解决方案，但基本上与您的建议相同。
是的，map() 会起作用，因为索引是数字的。聪明的。结果如何？开源吧！
谢谢，这里是：jsfiddle.net/hohenheim/6R7mu/6 仍然需要弄清楚如何在 x 轴上显示/转换日期而不是毫秒。
您可以使用 Date: d=new Date; d.setTime(num*1000);（setTime 需要 ms，而不是 s），然后使用 getFullYear 和 getDate 和 getMonth+1

【解决方案2】：

我只是偶然发现了他们的 github 页面，看来上面的答案是正确的。

https://github.com/novus/nvd3/wiki/Sample-chart-(your-first-nvd3-chart!) 图表的数据格式应该是：

[
    {
        key: "<Series name>",
        color: "<CSS color>",
        values: [
            {x: 0, y: 10},
            {x: 1, y: 20},
            {x: 2, y: 30}
            ....
        ]
    },
    {
        key: "<Series name>"
        ...
    }
]

【讨论】：