如何使用nvd3.js设置图形的Y轴的值

时间:2015-07-16 10:43:47

标签: javascript d3.js graph nvd3.js

我尝试使用 nvd3.js 设置 y轴的值: 这是我在Y轴上得到的: 的 [0,0.1,0.2,0.3,...,0.9,1]

我想要的只是显示 0和1 。 我试试这个chart.yRange([0,1]),但对我不起作用。有任何想法如何实现这一点。

这就是我所拥有的:

enter image description here

这就是我想得到的: enter image description here

这是代码:

line: function () {
        var self = this,
            dim_x = this.pivot.rows.groupby.length,
            dim_y = this.pivot.cols.groupby.length;

        var rows = this.pivot.get_rows_with_depth(dim_x),
            labels = _.pluck(rows, 'title');

        var data = _.map(this.pivot.get_cols_leaves(), function (col) {
            var values = _.map(rows, function (row, index) {
                return {x: index, y: self.pivot.get_values(row.id,col.id)[0] || 0};
            });
            var title = _.map(col.path, function (p) {
                return p || _t('Undefined');
            }).join('/');
            if (dim_y === 0) {
                title = self.pivot.measures[0].string;
            }
            return {values: values, key: title};
        });

        nv.addGraph(function () {
            // var chart = nv.models.lineWithFocusChart()
            var chart = nv.models.lineChart()
                .x(function (d,u) { return u; });
            /// get the max and the min of the chart
            var i;
            var max,min;
            for(i=0;i<data[0].values.length;i++){
            //alert("Y:"+data[0].values[i].y);
            if (i==0) {
                max=data[0].values[i].y;min=data[0].values[i].y;
            }
            if (max<data[0].values[i].y) {
                max=data[0].values[i].y;
            }
            if (min>data[0].values[i].y) {
                min=data[0].values[i].y;
            }
            }


            chart.xAxis.tickFormat(function (d,u) {return labels[d];});
            if ((min == 0) &(max==1)){
                //here i check when the max is 1 and the min is 0
            }

            //alert("TICKS:"+chart.yAxis.ticks())

            d3.select(self.svg)
                .attr('width', self.width)
                .attr('height', self.height)
                .datum(data)
                .call(chart);
            return chart;
          });
    }

2 个答案:

答案 0 :(得分:0)

在jsfiddle.net/varatharaj/442o9kxh查看我的示例代码

答案 1 :(得分:0)

在y轴图表对象上调用CASE WHEN StkItem.AveUCst <= 0 THEN NULL WHEN StkItem.AveUCst > 0 THEN (StkItem.AveUCst * BomComp.ProductionQty) END AS TotalCost