nvd3 离散条形图 y 轴标签答案

【问题标题】：nvd3 discreteBarChart y axis labelnvd3 离散条形图 y 轴标签
【发布时间】：2013-06-21 18:46:03
【问题描述】：

我正在使用以下代码为 nvd3 中的离散条形图设置 y 轴标签，但它没有显示 y 轴标签。顺便说一句，x 轴标签工作正常。

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

【问题讨论】：

标签： javascript nvd3.js

【解决方案1】：

需要注意的一点是，如果左侧的chart.margin 值太小，标签将没有足够的空间显示。您可以调整chart.margin 值或通过调整axisLabelDistance 选项将y 轴标签移近图表：

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

【讨论】：

有没有办法用 xAxis 做到这一点？ chart.margin 和 axisLabelDistance 对我不起作用，至少在 multiBarChart() 上。谢谢
查看this answer。您可以使用rotate 值调整文本方向，使用translate 值调整文本位置。

【解决方案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;
});

您可能在某个地方有错字。

【讨论】：

对我来说，轴标签不会在检查时显示，而 x 轴会显示

【解决方案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
                    }
                ]
            }
        ]
    })

【讨论】：