Question

我使用以下配置在angular nvd3的帮助下显示我的折线图。问题是，如果边缘附近只有一个点，那么在显示图表的同时，除非它被徘徊，否则它不会显示。

$scope.options = {
        chart: {
            type: 'lineChart',
            forceY:[0],            
            height: 450,
            margin : {
                top: 30,
                right: 70,
                bottom: 68,
                left: 90
            },
            x: function(d){ return d[0]; },
            y: function(d){ return d[1]; },
            useInteractiveGuideline: false,
            xDomain: [moment($scope.calenderStartDate).valueOf(), moment($scope.calenderEndDate).valueOf()],            
            lines:{
                            dispatch: {
                                elementClick: function(e){
                                    console.log(e);
                                    handleDataForTable(e.point.x,e.series.key);
                                    $scope.api.refresh();
                                },
                                elementMouseout: function(){}
                            }
                },
            xScale: d3.time.scale().clamp(true),
            xAxis: {
                tickFormat: function(d){
                    return d3.time.format('%d-%b-%y')(new Date(d))
                },                    
                 rotateLabels:-30

            },

        legend: {
                vers: 'furious'
        },
        showLegend:false,
            yAxis: {
                axisLabel: 'No of Bookings',
                tickFormat: function(d){
                    return d3.format('d')(d);
                }
            },
            callback: function(chart){
                console.log("!!! lineChart callback !!!");
            },
            defined:function(d) { return !isNaN(d[1]); }
        },
        title: {
            enable: false,
            text: 'Title for Line Chart'
        },
        subtitle: {
            enable: false,
            text: '',
            css: {
                'text-align': 'center',
                'margin': '10px 13px 0px 7px'
            }
        },
        caption: {
            enable: false,
            html: '',
            css: {
                'text-align': 'justify',
                'margin': '10px 13px 0px 7px'
            }
        }
    };

}

Answer 1

如果您的数据长度为1，则从$ scope.options.chart.forceY中删除forceY，如下所示：

删除$ scope.options.chart [＆＃39; forceY＆＃39;]

图表将由d3正确呈现。问题是当你使用“强力”时。 d3中的选项，如果没有渲染单点。你必须通过悬停找到图中的点。所以删除＆＃39; forceY＆＃39;当数据长度为1时，图形将使用d3提供的默认渲染选项正确渲染，单点可见，y轴将显示1，空格指示0和2（某些值大于1）。

单点未在nvd3折线图中显示

1 个答案: