带有nvd3 / d3的多条图表仅显示x轴上每隔一个刻度的标签。如何让他们全部出现？

本文介绍了带有nvd3 / d3的多条图表仅显示x轴上每隔一个刻度的标签。如何让他们全部出现？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

资料：

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 - >
chart = nv.models.multiBarChart（）
.stacked（true）
.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个标签：
MTWRFSU

Expected output would have all 7 labels:M T W R F S U

推荐答案

.org找不到任何真实的文档，但检查源代码，我发现，它显示了一个布尔图表参数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的多条图表仅显示x轴上每隔一个刻度的标签。如何让他们全部出现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

NVD3