Question

我已经为数据生成了一个条形图，以显示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轴上的条宽和最大范围？

Answer 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,

图表dict中的

也有助于动态调整宽度

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

1 个答案: