Javascript 为什么NVD3.js line plus条形图示例呈现两个图表而不是一个?
我根据NVD3团队在图书馆官方网站上提供的示例代码,编写了以下测试代码。出于某种原因,我总是在页面上看到两个图表:一个在两个Y轴上有正确的标签,另一个在X轴上有正确的标签,而第二个在垂直方向上更为压缩,在Y轴上没有任何标签,在X轴上有看起来像是数据数组索引的图表 下面的代码假设D3和NVD3的最新版本,尽管这种行为即使在使用网站链接到的旧版本D3时也会表现出来 提前感谢您对此问题的帮助和见解Javascript 为什么NVD3.js line plus条形图示例呈现两个图表而不是一个?,javascript,d3.js,charts,nvd3.js,Javascript,D3.js,Charts,Nvd3.js,我根据NVD3团队在图书馆官方网站上提供的示例代码,编写了以下测试代码。出于某种原因,我总是在页面上看到两个图表:一个在两个Y轴上有正确的标签,另一个在X轴上有正确的标签,而第二个在垂直方向上更为压缩,在Y轴上没有任何标签,在X轴上有看起来像是数据数组索引的图表 下面的代码假设D3和NVD3的最新版本,尽管这种行为即使在使用网站链接到的旧版本D3时也会表现出来 提前感谢您对此问题的帮助和见解 <!DOCTYPE html> <html lang="en"> <hea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Line + Bar Chart | NVD3.js</title>
<link rel="stylesheet" href="nv.d3.css"/>
<style>
#chart svg {
height: 400px;
}
</style>
</head>
<body>
<div id="chart">
<svg></svg>
</div>
<script src="d3.js"></script>
<script src="nv.d3.js"></script>
<script>
var data = [
{
'key': 'foo',
'bar': true,
'color': 'skyblue',
'values': [
[1431993600000, 31.6882],
[1432080000000, 76.1706],
[1432166400000, 76.2297],
[1432252800000, 75.1944],
[1432339200000, 75.1536],
[1432425600000, 74.528],
[1432512000000, 75.7265],
[1432598400000, 75.8659],
[1432684800000, 74.6283],
[1432771200000, 73.3533]
]
},
{
'key': 'bar',
'color': 'steelblue',
'values': [
[1431993600000, 0.0002997961386257345],
[1432080000000, 0.0004418193656404055],
[1432166400000, 0.0003122142681920564],
[1432252800000, 0.00031651293181407124],
[1432339200000, 0.0003845457835685849],
[1432425600000, 0.00031934306569343066],
[1432512000000, 0.0005163317993040745],
[1432598400000, 0.00042575122683577205],
[1432684800000, 0.00025057518394496457],
[1432771200000, 0.00041715914621428076]
]
}
];
nv.addGraph(function () {
var chart = nv.models.linePlusBarChart()
.margin({
top: 30,
right: 60,
bottom: 50,
left: 70
})
.x(function (d, i) {
return i;
})
.y(function (d, i) {
return d[1];
});
chart.xAxis
.showMaxMin(true)
.tickFormat(function (d) {
var dx = data[0].values[d] && data[0].values[d][0] || 0;
return d3.time.format('%x')(new Date(dx));
});
chart.y1Axis
.tickFormat(d3.format(',f'));
chart.y2Axis
.tickFormat(function (d) {
return d3.format('g')(d)
});
chart.bars.forceY([0, 200]);
chart.lines.forceY([0]);
d3.select('#chart svg')
.datum(data)
.transition()
.duration(0)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
</script>
</body>
</html>
线条+条形图| NVD3.js
#图表svg{
高度:400px;
}
风险值数据=[
{
“key”:“foo”,
“酒吧”:没错,
“颜色”:“天蓝色”,
“价值观”:[
[1431993600000, 31.6882],
[1432080000000, 76.1706],
[1432166400000, 76.2297],
[1432252800000, 75.1944],
[1432339200000, 75.1536],
[1432425600000, 74.528],
[1432512000000, 75.7265],
[1432598400000, 75.8659],
[1432684800000, 74.6283],
[1432771200000, 73.3533]
]
},
{
“键”:“条”,
“颜色”:“钢蓝”,
“价值观”:[
[1431993600000, 0.0002997961386257345],
[1432080000000, 0.0004418193656404055],
[1432166400000, 0.0003122142681920564],
[1432252800000, 0.00031651293181407124],
[1432339200000, 0.0003845457835685849],
[1432425600000, 0.00031934306569343066],
[1432512000000, 0.0005163317993040745],
[1432598400000, 0.00042575122683577205],
[1432684800000, 0.00025057518394496457],
[1432771200000, 0.00041715914621428076]
]
}
];
nv.addGraph(函数(){
var chart=nv.models.linePlusBarChart()
.保证金({
前30名,
右:60,
底数:50,
左:70
})
.x(功能(d,i){
返回i;
})
.y(功能(d,i){
返回d[1];
});
chart.xAxis
.showMaxMin(真)
.d格式(函数(d){
var dx=data[0]。值[d]&&data[0]。值[d][0]| | 0;
返回d3.time.format(“%x”)(新日期(dx));
});
图表1轴
.tickFormat(d3.format(',f'));
图表2轴
.d格式(函数(d){
返回d3.格式('g')(d)
});
图.条.力([0200]);
图.线.力([0]);
d3.选择(“#图表svg”)
.基准(数据)
.transition()
.持续时间(0)
.电话(图表);
nv.utils.windowResize(图表更新);
收益表;
});
第二个字符是焦点图表-它允许用户选择并放大主图表的特定部分。
要禁用它,只需将focusEnable
选项设置为false
,如下所示:
nv.addGraph(function () {
var chart = nv.models.linePlusBarChart()
.margin({
top: 30,
right: 60,
bottom: 50,
left: 70
})
.x(function (d, i) { return i; })
.y(function (d, i) { return d[1]; });
.options({focusEnable: false}); // here it is
// ...
return chart;
});
另外,这里有一个我用来找出答案的图表实例:将
focusEnable
选项设置为false
这第二个字符是一个焦点图表-它允许用户选择并放大主图表的特定部分。
要禁用它,只需将focusEnable
选项设置为false
,如下所示:
nv.addGraph(function () {
var chart = nv.models.linePlusBarChart()
.margin({
top: 30,
right: 60,
bottom: 50,
left: 70
})
.x(function (d, i) { return i; })
.y(function (d, i) { return d[1]; });
.options({focusEnable: false}); // here it is
// ...
return chart;
});
另外,这里有一个我用来找出答案的图表实例:将
focusEnable
选项设置为false
谢谢!!你现在正式成为我最喜欢的人了你的回答对我也有帮助。谢谢!!你现在正式成为我最喜欢的人了你的回答对我也有帮助。