nvd3 和 angular - 无法修复轴值
nvd3 and angular - Unable to fix axis values
我正在尝试使用 angular-nvd3
开发多图表。
图表工作正常,我可以获取数据并显示我需要的值。我现在遇到的问题是,我想在 x-axis
上显示一些特定的值,但由于某些原因我不能。
这是我目前得到的:http://codepen.io/NickHG/pen/rLWNea?editors=1010
图表选项如下:
chart: {
type: 'multiChart',
height: 450,
margin: {
top: 10,
right: 40,
bottom: 60,
left: 30
},
useInteractiveGuideline: false,
transitionDuration: 10,
style: 'expand',
tooltip: {
keyFormatter: function(d, i) {
return "Test";
}
},
zoom: {
enabled: true
},
xScale: x_scale,
xAxis: {
ticks: 14,
domain: [0, 14],
axisLabel: '',
tickFormat: function(d) {
return d3.time.format('%H:%M')(new Date(d * 1000));
}
},
Axis1: {
axisLabel: '',
axisLabelDistance: -100
}
}
我想要实现的是 00:00 to 23:00
每小时的 X 轴(我也试过这个但没有成功:how to use d3.time.scale to create label for each hour of day and each day of week)
x 轴的想法是我应该能够显示小时、天或周,但我想一旦我正确理解了如何显示小时,我应该能够自己弄清楚如何打印不同格式的值。
感谢您的帮助
你几乎一路到那里。您只需要在笔中修改 x 轴上的刻度数从 6 到 24....
nv.addGraph(function() {
chart = nv.models.multiChart()
chart.margin({"left":5,"right":5,"top":10,"bottom":20})
chart.showLegend = true
chart.xAxis
.scale(xAxisScale())
.ticks(24) //--> changed from .ticks(6)
.tickFormat(d3.time.format("%H:%M"));
参见Updated pen。干杯!
我正在尝试使用 angular-nvd3
开发多图表。
图表工作正常,我可以获取数据并显示我需要的值。我现在遇到的问题是,我想在 x-axis
上显示一些特定的值,但由于某些原因我不能。
这是我目前得到的:http://codepen.io/NickHG/pen/rLWNea?editors=1010
图表选项如下:
chart: {
type: 'multiChart',
height: 450,
margin: {
top: 10,
right: 40,
bottom: 60,
left: 30
},
useInteractiveGuideline: false,
transitionDuration: 10,
style: 'expand',
tooltip: {
keyFormatter: function(d, i) {
return "Test";
}
},
zoom: {
enabled: true
},
xScale: x_scale,
xAxis: {
ticks: 14,
domain: [0, 14],
axisLabel: '',
tickFormat: function(d) {
return d3.time.format('%H:%M')(new Date(d * 1000));
}
},
Axis1: {
axisLabel: '',
axisLabelDistance: -100
}
}
我想要实现的是 00:00 to 23:00
每小时的 X 轴(我也试过这个但没有成功:how to use d3.time.scale to create label for each hour of day and each day of week)
x 轴的想法是我应该能够显示小时、天或周,但我想一旦我正确理解了如何显示小时,我应该能够自己弄清楚如何打印不同格式的值。
感谢您的帮助
你几乎一路到那里。您只需要在笔中修改 x 轴上的刻度数从 6 到 24....
nv.addGraph(function() {
chart = nv.models.multiChart()
chart.margin({"left":5,"right":5,"top":10,"bottom":20})
chart.showLegend = true
chart.xAxis
.scale(xAxisScale())
.ticks(24) //--> changed from .ticks(6)
.tickFormat(d3.time.format("%H:%M"));
参见Updated pen。干杯!