所有刻度值未显示在 X 轴上

Question

我正在制作像这样的堆叠式多图表条形图

到目前为止，我也可以在 Y 轴和 X 轴上推动我的值，但我面临的问题是所有值都没有显示在 x 轴上，但只显示了 10 个值。我在 angular 代码中使用 nvD3 库。并在 x 轴上显示日期。

  $scope.options1 = {
    chart: {
      type: 'multiBarChart',
      height: 600,
      margin: {
    top: 20,
    right: 20,
    bottom: 200,
    left: 45
      },
      clipEdge: false,
      duration: 500,
      stacked: true,
      groupSpacing: 0.1,
      useInteractiveGuideline: true,
      showMaxMin: false,
      xAxis: {
    axisLabel: 'Timeline',
    showMaxMin: false,
    tickFormat: function(d) {
    return d3.time.format('%d-%m-%y')(new Date(d))
    },
    xScale:d3.time.scale(),
    rotateLabels: '-70'
      },
      yAxis: {
    axisLabel: 'Pending Bills',
    axisLabelDistance: -20,
    groupSpacing: 0.1,
    tickFormat: function(d) {
      return d3.format(',f')(d);
    }
      }
    }
  };

使用此函数生成滴答值数组

$scope.options1.chart.xAxis.tickValues = function() {
      var xTick = _.map(data.data.data[0].values, function(value) {
    return value.x;
      });
      xTick = _.sortBy(xTick, function(date){ return new Date(date); });
      console.log(xTick);
      return xTick;
    }

console.log(xTick) 的输出是这样的，所有日期都是 -

["2015-09-01", "2015-09-02", "2015-09-03", "2015-09-04", "2015-09-05", "2015-09-06", "2015-09-07", "2015-09-08", "2015-09-09", "2015-09-10", "2015-09-11", "2015-09-12", "2015-09-13", "2015-09-14", "2015-09-15", "2015-09-16", "2015-09-17", "2015-09-18", "2015-09-19", "2015-09-20", "2015-09-21", "2015-09-22", "2015-09-23", "2015-09-24", "2015-09-25", "2015-09-26", "2015-09-27", "2015-09-28", "2015-09-29", "2015-09-30", "2015-10-01", "2015-10-02", "2015-10-03", "2015-10-04", "2015-10-05", "2015-10-06", "2015-10-07", "2015-10-08", "2015-10-09", "2015-10-10", "2015-10-11", "2015-10-12", "2015-10-13", "2015-10-14", "2015-10-15", "2015-10-16", "2015-10-17", "2015-10-18", "2015-10-19", "2015-10-20"]

我读了很多关于它的文章。所有日期都应该绘制在 x 轴上，但它们不是

Answer 1

如果您想在 X 轴上显示所有刻度，您可以将此选项添加到您的图表选项中：

"reduceXTicks": false,

您可以访问扩展选项页面：

Angular NVD3 - MultiBarChart

希望对您有所帮助。

Answer 2

chart: {
    type: 'chartType',
    xAxis: {
        ticks:8
    }
}

如果您想在轴上显示特定数量的刻度，您可以尝试 "ticks" 属性。

所有刻度值未显示在 X 轴上

All tickvalues not getting displayed on X axis

d3.js

nvd3.js