- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试修复使用 nvd3 (D3) 库完成的简单折线图,但似乎无法修复代码。
这是 fiddle :http://jsfiddle.net/sourabhtewari/o24ffe99/
数据是这样的
var reportData = [{
"key": "ActualElapsedTime",
"color": "#d62728",
"values": [{
"x": "2016-03-21T00:00:00",
"y": 100.00
}, {
"x": "2016-03-22T00:00:00",
"y": 99.00
}]
}];
所有的代码都是这样的
nv.addGraph(function() {
var chart = nv.models.lineChart()
.margin({
left: 100
}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis
;
chart.xAxis //Chart x-axis settings
.axisLabel('Date')
.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis //Chart y-axis settings
.axisLabel('Consistancy')
.tickFormat(d3.format('.02f'));
var reportData = [{
"key": "ActualElapsedTime",
"color": "#d62728",
"values": [{
"x": "2016-03-21T00:00:00",
"y": 100.00
}, {
"x": "2016-03-22T00:00:00",
"y": 99.00
}]
}];
/* Done setting the chart up? Time to render it!*/
d3.select('#chart svg') //Select the <svg> element you want to render the chart in.
.datum(reportData) //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
//Update the chart when window resizes.
nv.utils.windowResize(function() {
chart.update()
});
return chart;
});
我无法正确绘制图表。我对 d3 没有足够的经验。如果有人可以帮我解决这个问题。我将不胜感激。
最佳答案
使用Date reportData
中的对象而不是字符串:
var reportData = [{
"key": "ActualElapsedTime",
"color": "#d62728",
"values": [{
"x": new Date("2016-03-21T00:00:00"),
"y": 100.00
}, {
"x": new Date("2016-03-22T00:00:00"),
"y": 99.00
}]
}];
此外,您可以根据您的数据设置tickValues
:
var tickValues = reportData[0].values.map(function(p) { return p.x});
chart.xAxis.tickValues(tickValues);
工作示例:http://jsfiddle.net/LukaszWiktor/rcL0uot9/
结果:
关于javascript - 格式化 nvd3 折线图轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36174806/
[INFO] [INFO] --- dependency-check-maven:4.0.2:check (default) @ realtimePaymachine --- [INFO] Centr
我开始从 NVD XML 提要转向 JSON 提要(因为从 2019 年 10 月起不再支持 XML)。现在我很难理解这些标签及其使用目的。 例如: “配置”中的“运算符(operator)”标签有什
我的 IT 产品已定义 CPE,例如:cpe:/o:microsoft:windows_vista:6.0:sp1:~-~home_premium~-~x64~- 我正在使用 NVD 数据源来获取所有
我们正在使用 jQuery,我在国家漏洞数据库中发现了以下 jQuery 漏洞: http://web.nvd.nist.gov/view/vuln/detail?vulnId=CVE-2007-23
我正在尝试下载 NVD CVE。这是我的Python代码: import requests import re r = requests.get('https://nvd.nist.gov/vuln/
目前我正在使用 Angular-nvd3 图形来显示数据。但是,堆叠面积图 nvd3 图形类型正在切断数字和轴标签。模板图可查看here 。 y 轴数字和标签是主要关注点。下面是图形选项代码和问题的图
我们在项目中遇到以下错误,该URL何时返回? > Task :dependencyCheckAnalyze Verifying dependencies for project cckm-app
我在gitlab管道中使用gradle:5.6.2-jdk8 docker镜像。 gradle clean build 上面的命令因错误而失败: 无法下载元文件:https://nvd.nist.go
我是一名优秀的程序员,十分优秀!