y轴 - 最小 - 最大范围 - 角度NVD3 - 折线图

时间:2016-03-09 05:14:28

标签: angularjs angularjs-directive linechart angular-nvd3

用法 - Angular NVD3 LineChart

我正在获取数据,但当数据为0 时,它绘制图形并绘制y轴从范围-1,0,1

但我确实想在负y轴上绘图,因为我的数据永远不会是负数。

X轴包含时间。

我的图表随着时间的推移而增加,问题就像前几分钟数据将为0,然后我将开始获取数据。

JavaScript代码

$scope.options = {
                        chart: {
                            type: 'lineChart',
                            height: 120,
                            margin : {
                                top: 8,
                                bottom: 30,
                                left:40,
                                right:50,
                            },
                      color: ['#e4a91d','#444fa2','#de0000']
                    , showLegend: false
                    , wrapLabels: true
                    , tooltips:true
                    , reduceXTicks: false,


                            x: function(d){ return d[0]; },
                            y: function(d){ return d[1]; },

                            showDistY: true,
                            showDistX: true,
                            useInteractiveGuideline: true,
                            transitionDuration: 10,

                            xAxis: {
                                axisLabel: '',
                                tickFormat: function(d) {
                                    return d3.time.format('%H:%M')(new Date(d));
                                },
                                tickPadding: 10,
                                axisLabelDistance: 1,
                                ticks: 10,
                            },

                            yAxis: {
                                axisLabel: '1 / 2 / 3',
                                tickFormat: function(d){
                                    return d;
                                },
                                ticks: 4,
                            }
                        }
                    };

Html代码

<div>
    <nvd3 options="options" data="data" api="api"></nvd3>
</div>

截图

enter image description here

1 个答案:

答案 0 :(得分:5)

我认为这应该有效。 将这些添加到图表对象中 yDomain: [0, maxY] // maxY being whatever you want your max y value to be 我在图表中使用了类似的东西。在https://github.com/krispo/angular-nvd3/issues/47

找到它