Question

我正在使用NVD3 Line Chart分叉this Plunker。我有52周的数据，但线图上的x轴仅采用前9周的数据。请在下面找到我的代码 -

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
            chart: {
                type: 'lineChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 40,
                    left: 55
                },
                    showControls: false,
                    showValues: true,
                    x: function (d) { return d.x; },
                    y: function (d) { return d.y; },
                    useInteractiveGuideline: true,
                    duration: function (d, i) { return parseInt(i + 1) * 600; },
                    xAxis: {
                        axisLabel: 'Week',
                        tickFormat: function (d) {
                            return d
                        },
                        reduceXTicks:false,
                        staggerLabels:false
                    },
                    yAxis: {
                        axisLabel: 'Loss',
                        tickFormat: function (d) {
                            return d3.format(",.2f")(d)
                        },
                        //axisLabelDistance: -10
                    }
            },
        };

        $scope.data = sinAndCos();

        /*Random Data Generator */
        function sinAndCos() {
          var ApplicableLossHighData = [{"x":"1","y":"1.65"},{"x":"2","y":"1.6"},{"x":"3","y":"1.65"},{"x":"4","y":"1.55"},{"x":"5","y":"1.7"},{"x":"6","y":"1.45"},{"x":"7","y":"1.65"},{"x":"8","y":"1.65"},{"x":"9","y":"1.55"},{"x":"10","y":"1.6"},{"x":"11","y":"1.6"},{"x":"12","y":"1.55"},{"x":"13","y":"1.75"},{"x":"14","y":"1.65"},{"x":"15","y":"1.65"},{"x":"16","y":"1.7"},{"x":"17","y":"1.65"},{"x":"18","y":"1.8"},{"x":"19","y":"1.8"},{"x":"20","y":"1.7"},{"x":"21","y":"1.8"},{"x":"22","y":"1.75"},{"x":"23","y":"1.7"},{"x":"24","y":"1.65"},{"x":"25","y":"1.6"},{"x":"26","y":"1.65"},{"x":"27","y":"1.65"},{"x":"28","y":"1.5"},{"x":"29","y":"1.55"},{"x":"30","y":"1.55"},{"x":"31","y":"1.5"},{"x":"32","y":"1.45"},{"x":"33","y":"1.7"},{"x":"34","y":"1.65"},{"x":"35","y":"1.6"},{"x":"36","y":"1.65"},{"x":"37","y":"1.65"},{"x":"38","y":"1.65"},{"x":"39","y":"1.85"},{"x":"40","y":"1.9"},{"x":"41","y":"1.9"},{"x":"42","y":"1.8"},{"x":"43","y":"1.9"},{"x":"44","y":"1.85"},{"x":"45","y":"1.85"},{"x":"46","y":"1.8"},{"x":"47","y":"1.8"},{"x":"48","y":"1.8"},{"x":"49","y":"1.55"},{"x":"50","y":"1.5"},{"x":"51","y":"1.45"},{"x":"52","y":"1.5"}]
           return  [{values: ApplicableLossHighData,      //values - represents the array of {x,y} data points
                   key: 'High', //key  - the name of the series.
                   color: '#ff7f0e',  //color - optional: choose your own line color.
                  }]
        }
});

输出：

请帮我解决这个问题。

Answer 1

问题是您将字符串值传递给x函数。然后轴在“5”旁边排列“52”。你需要这样做：

x: function (d) { return +d.x; },
y: function (d) { return +d.y; },

注意+运算符将字符串值强制转换为数字。

NVD3折线图X轴仅显示初始值9

1 个答案: