如何使用 nvd3.js 为条形图的 y 轴和条形宽度设置最大值（范围）答案

【问题标题】：How can I set max value(range) for y-axis and bar width of a bar chart using nvd3.js如何使用 nvd3.js 为条形图的 y 轴和条形宽度设置最大值（范围）
【发布时间】：2016-08-18 18:51:57
【问题描述】：

我为数据生成了一个条形图，以 5 级（评级）显示五个主题的评级。在 x 轴上，我显示了主题名称。

        $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,
            duration: 500,
            xAxis: {
                axisLabel: 'X Axis'
            },
            yAxis: {
                axisLabel: 'Y Axis',
                axisLabelDistance: -10
              }
            }
         };
        $scope.data = [{
            values: $scope.Details.ratings              
        }];

HTML：

 <nvd3 options="options" data="data"></nvd3>

在 y 轴上，最大值应为 5，但此处取数据中的最大值，并且条形图中的条形宽度较大。如何更改 y 轴上的条形宽度和最大范围？

【问题讨论】：

这太宽泛了。与其列出程序的要求并希望有人提供代码来实现它，不如展示您尝试过的代码以及实现它时失败的原因。
是的，我同意@Claies 的观点，但我对图表很陌生，我尝试使用 Angular Charts、Fusion Charts、C3.js，但都找不到完全符合我要求的。所以我期待一些建议，比如关于适当来源的建议来完全满足我的要求。
这不会使您的问题更适合该网站，如果有的话，这会使问题更适合。来自stackoverflow.com/help/on-topic - “4. 要求我们推荐或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是无关紧要的，因为它们往往会吸引固执己见的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决该问题所做的工作。”
感谢@Claies 纠正我。我是stackoverflow的新手。我已经上传了我尝试使用 nvd3.js 的代码 sn-p

标签： angularjs d3.js charts nvd3.js

【解决方案1】：

我使用以下代码设置条形宽度并调整条形曲率

enter code here
dispatch: {
    renderEnd: function (e) {
d3.selectAll("rect.nv-bar").attr('rx', 4).attr('ry', 4).attr('width', 15)
}
    }

放

groupSpacing : 0.57,

在图表字典中也将有助于动态调整宽度

【讨论】：