带有 nvd3/d3 的 MultiBar 图表仅显示 x 轴上每隔一个刻度的标签.我怎样才能让他们全部出现? [英] MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
问题描述
数据:
nvd3TestData = [
{
values:[
{x:"M",y:1},
{x:"T",y:2},
{x:"W",y:3},
{x:"R",y:3},
{x:"F",y:4},
{x:"S",y:5},
{x:"U",y:6}
],
key:"Apples"
},
{
values:[
{x:"M",y:5},
{x:"T",y:2},
{x:"W",y:6},
{x:"R",y:8},
{x:"F",y:2},
{x:"S",y:4},
{x:"U",y:1}
],
key:"Zebras"
}
]
创建图表(从 angularjs 指令中提取):
Creating the chart (pulled from an angularjs directive):
nv.addGraph ->图表 = nv.models.multiBarChart().stacked(真).showControls(false)
nv.addGraph -> chart = nv.models.multiBarChart() .stacked(true) .showControls(false)
chart.xAxis
.axisLabel(attrs.xAxisLabel)
chart.yAxis
.axisLabel(attrs.yAxisLabel)
.tickFormat(d3.format(',r'))
console.log element
d3.select(element[0].children[0])
.datum(nvd3TestData)
.call(chart)
nv.utils.windowResize(chart.update)
输出:
预期输出将包含所有 7 个标签:M T W R F S U
Expected output would have all 7 labels: M T W R F S U
推荐答案
我查看了 nvd3.org 并没有找到任何真正的文档,但查看源代码,我找到了 https://github.com/novus/nvd3/blob/master/src/models/multiBarChart.js 显示一个布尔值reduceXTicks"的图表参数,带有注释,表明它会做你想做的事.我用其中一个示例图表进行了尝试,它奏效了.具体来说,我使用了:
I looked on nvd3.org and couldn't find any real documentation, but checking the source, I found https://github.com/novus/nvd3/blob/master/src/models/multiBarChart.js which showed a boolean chart parameter of "reduceXTicks" with a comment indicating it would do what you want. I tried it out with one of the example charts and it worked. Specifically, I used:
chart
.reduceXTicks(true)
这篇关于带有 nvd3/d3 的 MultiBar 图表仅显示 x 轴上每隔一个刻度的标签.我怎样才能让他们全部出现?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!