Question

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

帮助解决此问题

Answer 1

为了您的目的，您可以尝试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

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

1 个答案: