NVD3图表中的JSON数据格式
JSON data format in NVD3 chart
我有一个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将接受的东西?
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轴吗?
假设你的数据顺序是正确的,并且只有一个来源:
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是一个?)
我只是偶然发现了他们的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>"
...
}
]
相关文章:
- Json数据包含日期和时间格式
- 如何通过数据分组将json数据转换为嵌套的json数据格式
- 将JSON数据格式化为excel文件
- 我们可以将控制器中的JSON数据(MM/DD/YYYY格式)与今天的's日期,并在数组中显示筛选列表
- 如何在 Javascript 中更改 JSON 数据的格式
- JSON 数据字符串替换和日期格式
- 将 Blogger.com JSON 数据恢复为 html 格式
- 以表格格式排列JSON数据
- 在数据库中存储json数据以及json对象的格式
- 如何将json数据转换为BPMN兼容格式
- 带有自定义格式的C#Web服务json数据jquery ui
- JSON数据格式不正确
- 有哪些方法可以以非表格格式显示Angular中的JSON数据
- JSON POST请求-JSON数据,如何使用JSON格式的数据进行POST请求
- 从平面json生成(多级)flare.json数据格式
- 更正格式错误的JSON数据
- 如何在angular JS中更改JSON数据格式
- NVD3图表中的JSON数据格式
- Javascript怪异的Fetch()问题,在特定的JSON数据/格式上失败
- 如何在AngularJS中进行http请求,以提供JSON数据格式