javascript - 如何在angularjs中绘制带有x和y轴的nvd3简单条形图

我在我的 nvd3.js 应用程序中使用 angular-js 插件。我提出了一个简单的 bar chart 要求，我需要根据 x-axis 上表示收入的值在 months 上显示表示 y-axis 的条形。我必须使用 nvd3.js plugin 来实现这一点。任何人都可以帮助如何使用 nvd3.js plugin? 实现这一目标

最佳答案

为了您的目的，您可以尝试 angular-nvd3 指令。

您应该将图表 options 和图表 data 设置为 json，类似于

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

//javascript, controller
$scope.options = {
    chart: {
        type: 'discreteBarChart',
        height: 450,
        x: function(d){return d.label;},
        y: function(d){return d.value;},
        showValues: true,
        valueFormat: function(d){
            return d3.format(',.2f')(d);
        },
        transitionDuration: 500,
        xAxis: {
            axisLabel: 'Month',
            rotateLabels: -20
        },
        yAxis: {
            axisLabel: 'Revenue',
            axisLabelDistance: 30
        }
    }
}

$scope.data = [{
    values: [{
        "label" : "Jan" ,
        "value" : 29.765957771107
    },{
        "label" : "Feb" ,
        "value" : 20
    },{
    ...
    }]
}]

见 live demo

关于javascript - 如何在angularjs中绘制带有x和y轴的nvd3简单条形图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24261517/