nvd3 discreteBarChart y軸標簽

Question

我使用以下代碼在y軸中為nvd3中的離散條形圖設置標簽，但它不顯示y軸的標簽。 順便說一下，x軸標簽工作正常。

chart.yAxis.axisLabel('Students (in %)');

Answer 1

需要注意的一點是，如果chart.margin值太小，標簽就沒有足夠的空間來顯示。 您可以調整chart.margin值，也可以通過調整axisLabelDistance選項將y軸標簽移近圖表：

chart.yAxis
    .axisLabel('Students (in %)')
    .axisLabelDistance(40);

Answer 2

以下作品：

nv.addGraph(function() {
  var chart = nv.models.discreteBarChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .staggerLabels(true)
      .tooltips(false)
      .showValues(true)

  chart.yAxis.axisLabel("Students (in %)")

  d3.select('#chart svg')
      .datum(data)
      .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

你可能在某個地方有一個錯字。

Answer 3

對於離散條形圖，您可以自定義圖表選項，如下所示。 您不需要使用所有這些選項在javascript代碼中創建圖表模型。 僅設置要更改的功能就足夠了，其他功能將采用默認值。

 'use strict'; angular.module('mainApp.controllers') .controller('discreteBarChartCtrl', function($scope){ $scope.options = { chart: { type: 'discreteBarChart', height: 450, margin : { top: 20, right: 20, bottom: 50, left: 55 }, x: function(d){return d.label;}, y: function(d){return d.value;}, showValues: true, valueFormat: function(d){ return d3.format(',.4f')(d); }, duration: 500, xAxis: { axisLabel: 'X Axis' }, yAxis: { axisLabel: 'Y Axis', axisLabelDistance: -10 } } }; $scope.data = [ { key: "Cumulative Return", values: [ { "label" : "A" , "value" : -29.765957771107 } , { "label" : "B" , "value" : 0 } , { "label" : "C" , "value" : 32.807804682612 } , { "label" : "D" , "value" : 196.45946739256 } , { "label" : "E" , "value" : 0.19434030906893 } , { "label" : "F" , "value" : -98.079782601442 } , { "label" : "G" , "value" : -13.925743130903 } , { "label" : "H" , "value" : -5.1387322875705 } ] } ] })