Question

我使用nvd3在我的角度js应用中创建条形图。这是脚本部分

<script>
        var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);

        function ExampleCtrl2($scope){
            $scope.exampleData2 = [
        {
            "key": "Series 1",
             "values": [ 
             ["2004",5],["2005",10],["2006",3],["2007",9],["2008",10],["2009",5]]
        }
    ];

    $scope.xFunction = function(){
    return function(d){
        return d[0];
    };
}

$scope.yFunction = function(){
    return function(d){
        return d[1];
    };
}

        }
    </script>

这里是视图div

<div ng-controller="ExampleCtrl2">
    <nvd3-line-chart
        data="exampleData2"
        id="xExample"
        width="550"
        height="300"
        showXAxis="true"
        showYAxis="true"
        x="xFunction()"
        y="yFunction()"
        tooltips="true">
            <svg></svg>
    </nvd3-line-chart>
</div>

我如何使用＆＃34; aaa＆＃34;等字符串？＆＃34; BBB＆＃34; ...作为x轴值。如果我更换＆＃34; 2004＆＃34;使用非数字字符串时会出错错误：属性转换的值无效=＆＃34;翻译（NaN，0）＆＃34;

Answer 1

您可以使用图表xAxis格式功能，如下所示

chart.xAxis
.axisLabel('Date')
.tickFormat(function(d) {
 var label = scope.totalLoanAmountData[0].values[d].label;
 return label;
});

然后使用标签属性如下所示使用您的数据。

scope.totalLoanAmountData=[{
                        "key": "name of line one",
                        "values":[
                {x:1,y:2, label:"label1"},
                {x:1,y:2, label:"label2"},
                {x:1,y:2, label:"label3"},
                {x:1,y:2, label:"label4"},
                {x:1,y:5, label:"label5"},
                {x:1,y:2, label:"label6"},
                {x:1,y:7, label:"label7"},
                {x:1,y:2, label:"label8"},
                {x:1,y:8, label:"label9"}]

                           },

                      {"key": "name of line two",
                        "values": [

                {x:1,y:8, label:"label1"},
                {x:1,y:2, label:"label2"},
                {x:1,y:2, label:"label3"},
                {x:1,y:6, label:"label4"},
                {x:1,y:5, label:"label5"},
                {x:1,y:2, label:"label6"},
                {x:1,y:8, label:"label7"},
                {x:1,y:2, label:"label8"},
                {x:1,y:2, label:"label9"}]

                      }];

阅读this blogpost了解详情。

如何将字符串值添加到nvd3折线图x轴值？

1 个答案: