javascript - nvd3 相同时间戳的正负值
问题描述
使用nvd3库,我试图在条形图中显示相同“x”值的正负“y”值(如两个倒置条)。这些值正在显示,但负值也被绘制在 y 轴的正刻度上。
如果我只显示负值,它可以正常工作,但在两种情况下,它都不能按预期工作。
以下是我目前在我的代码中的内容:
var chart;
nv.addGraph(function() {
chart = nv.models.historicalBarChart();
chart.useInteractiveGuideline(true);
chart.xAxis.axisLabel("Time (s)");
chart.yAxis.axisLabel('Voltage (v)');
d3.select('#chart svg')
.datum(sinAndCos())
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function sinAndCos() {
var sin = [], cos = [];
for (var i = 0; i < 100; i++) {
sin.push({
x: i,
y: i
});
cos.push({
x: i,
y: -(i)
});
}
return [
{
values: sin,
key: "Sine Wave",
color: "#ff7f0e"
},
{
values: cos,
key: "Cosine Wave",
color: "#2ca02c"
}
];
}
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, #chart, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" rel="stylesheet"/>
<div id="chart">
<svg></svg>
</div>
这是重现问题的 JSFiddle 的链接:https ://jsfiddle.net/prerak6962/a1zh9o4e/14/
有什么我遗漏或需要添加的吗?
解决方案
使用不同的条形图可以得到更好的结果
chart = nv.models.discreteBarChart();
chart = nv.models.multiBarChart();
var chart;
nv.addGraph(function() {
//chart = nv.models.historicalBarChart();
chart = nv.models.multiBarChart();
//chart.useInteractiveGuideline(true);
chart.xAxis.axisLabel("Time (s)");
chart.yAxis.axisLabel('Voltage (v)');
d3.select('#chart svg')
.datum(sinAndCos())
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function sinAndCos() {
var sin = [], cos = [];
for (var i = 0; i < 100; i++) {
sin.push({
x: i,
y: i
});
cos.push({
x: i,
y: -(i)
});
}
return [
{
values: sin,
key: "Sine Wave",
color: "#ff7f0e"
},
{
values: cos,
key: "Cosine Wave",
color: "#2ca02c"
}
];
}
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, #chart, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" rel="stylesheet"/>
<div id="chart">
<svg></svg>
</div>
推荐阅读
- c# - 无法将 JSON 字符串转换为对象列表
- java - 如何使用 Eclipse 调试旧版 GWT 代码
- python - Heroku 应用程序成功部署,但打开应用程序时收到应用程序错误
- java - 使用简单对象作为锁对象比 Java 中任何其他更复杂的对象都好?
- matplotlib - 手动将标签添加到已包含方案图例的 geopandas 地图
- symfony - Symfony 与教义多键
- python - 如何使用使用 Vimba SDK 的 Allied Vision 相机在 tkinter 中预览流式图像?
- node.js - 如何从 NPM 包内的主进程设置 process.env?
- node.js - 开玩笑 - 包含在 promisify 中的模拟 zlib 函数不起作用
- python - 使用 Python 在 excel 表单控件中获取值