- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 NVD3 库来制作图表,但我无法获取 JSON url 来与代码正常工作。
图形脚本:
d3.json("jsondata3.json",function(error,data){
var chart;
nv.addGraph(function() {
chart = nv.models.linePlusBarChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.margin({top: 30, right: 20, bottom: 50, left: 175})
chart.y1Axis.tickFormat(d3.format(',f'));
chart.y2Axis.tickFormat(d3.format(',f'));
d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
});
JSON数据格式:
[{"TRANSACTION_DAY":"20130620","MT_ATTEMPTED":4505891,"MT_SUCCESS":83.54,"MO_ATTEMPTED":321857,"MO_SUCCESS":98.9},{"TRANSACTION_DAY":"20130621","MT_ATTEMPTED":6636631,"MT_SUCCESS":81.33,"MO_ATTEMPTED":311954,"MO_SUCCESS":98.66},{"TRANSACTION_DAY":"20130622","MT_ATTEMPTED":2708897,"MT_SUCCESS":90.47,"MO_ATTEMPTED":334279,"MO_SUCCESS":98.95} ]
该示例附带了此代码(显然可以正常工作),但我发现它的格式与我的 JSON 数据略有不同。那里还使用了“map.series.values”函数。
var testdata = [
{
"key" : "Quantity" ,
"bar": true,
"values" : [ [ 1327986000000 , 690033.0] , [ 1330491600000 , 690033.0] , [ 1333166400000 , 514733.0] , [ 1335758400000 , 514733.0]]
},
{
"key" : "Price" ,
"values" : [ [ 1322629200000 , 382.2] , [ 1325307600000 , 405.0] , [ 1327986000000 , 456.48] , [ 1330491600000 , 542.44] , [ 1333166400000 , 599.55] , [ 1335758400000 , 583.98] ]
}
].map(function(series) {
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
return series;
});
那么如何让我的 JSON 文件与此代码一起正常工作呢?我迷路了...
最佳答案
我认为您仍然需要将 json 数据的格式设置为与示例数据的格式完全相同。尝试这个。
注意:javascript 时间戳以毫秒为单位,因此您应该将时间戳(20130620 等)转换为 unix 时间戳和 1000 的倍数。
var testdata = [
{
“键”:“MT_ATTEMPTED”,
“酒吧”:真实,
“值”:[[4505891,20130620],[6636631,20130621],[2708897,20130622]]
},
{
“关键”:“MT_SUCCESS”,
“值”:[[83.54,20130620],[81.33,20130621],[90.47,20130622]]
},
{
“键”:“MO_ATTEMPTED”,
“值”:[[321857、20130620]、[311954、20130621]、[334279、20130622]]
},
{
“关键”:“MO_SUCCESS”,
“值”:[[98.9,20130620],[98.66,20130621],[98.95,20130622]]
},
].map(函数(系列){
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
回归系列;
});
关于javascript - NVD3 - 将 JSON url 数据与 LinePlusBarChart 结合使用(映射值),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18447779/
我正在使用 angular-nvd3 的 LinePlusBarChart 来显示一些数据,非常像这样: http://plnkr.co/edit/mrkvM1ihrVRN9jdBFWiF?p=pre
我一直在寻找构建直方图的选项,在我尝试在准系统 d3 中执行此操作之前,我发现 nvd3 的 linePlusBarChart 是可取的,尽管给定的 example不是为具有累积百分比线的直方图设计的
我正在尝试使用 this 与 NVD3 库切换焦点图示例作为指导。代码可以找到here . 这是我用来切换的按钮: toggle focus 这是我的图表代码: var chart_users
我正在尝试使用 NVD3 库来制作图表,但我无法获取 JSON url 来与代码正常工作。 图形脚本: d3.json("jsondata3.json",function(error,data){ v
我是一名优秀的程序员,十分优秀!