本文介绍了如何隐藏nvd3图表上的第一个Y轴线?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

Plnkr示例:



我试过修改CSS,但我只能删除第二个(右Y轴线),而不是第一个左Y轴线。



我试过的:

  .nv-y {
display:none;
}

以及此答案中的所有行:

  d3.selectAll('。nv-y')。attr('display','none')

d3.selectAll('。nv-y path')。attr('opacity','0.1')

d3.selectAll('。nv-y path')。attr('display','none')

我当前的drawChart函数:

  function drawChart(res){
console.log('');
console.log('drawChart res =',res);
nv.addGraph(function(){
var chart = nv.models.linePlusBarChart()
.margin({top:30,right:40,bottom:50,left:40} )
.x(function(d,i){return i})
.y(function(d){return d [1]})
.color(d3.scale.category10 ().range());

chart.xAxis.tickFormat(function(d){
var dx = res [0] .values [d]& ] .values [d] [0] || 0;
return d3.time.format('%x')(new Date(dx))
});
$ b b chart.y1Axis
.tickFormat(d3.format(',f'));

chart.y2Axis
.tickFormat(function(d){return'$'+ d3.format(',f')(d)});

chart.bars.forceY([0]);
// http://stackoverflow.com/questions/ 23754188 / nvd3-js-how-to-disable-tooltips-for-one-serie-only
chart.lines.interactive(false);
// http://nvd3-community.github。 io / nvd3 / examples / documentation.html#line
chart.height(280);
//如果没有图表数据可用于显示:
chart.noData(目前没有要显示的数据。

//删除图例:
chart.showLegend(false);

d3.select('#chart svg')
.datum(res)
.transition()。duration(500)


d3.selectAll('。nv-y path')。attr('display','none');

nv.utils.windowResize(chart.update);

return chart;
});
}


解决方案

第一个y轴执行:

  .nv-y1 {
display:none;
}

如果要隐藏第二个y轴,请执行以下操作:

  .nv-y2 {
display:none;
}


Plnkr example:http://plnkr.co/edit/19D5cnrVYdUrMlblQARy?p=preview

Screenshot from my app:

I've tried modifying the CSS, however I was only able to remove the 2nd (right Y axis line), but not the first left Y axis line.

What I've tried:

.nv-y { 
    display: none;
}

As well as all the lines from this answer: Alter first vertical grid line in nvd3

d3.selectAll('.nv-y').attr('display','none')

d3.selectAll('.nv-y path').attr('opacity','0.1')

d3.selectAll('.nv-y path').attr('display','none')

My current drawChart function:

function drawChart(res) {
    console.log(' ');
    console.log('drawChart res = ',res);
    nv.addGraph(function() {
        var chart = nv.models.linePlusBarChart()
            .margin({top: 30, right: 40, bottom: 50, left: 40})
            .x(function(d,i) { return i })
            .y(function(d) { return d[1] })
            .color(d3.scale.category10().range());

        chart.xAxis.tickFormat(function(d) {
            var dx = res[0].values[d] && res[0].values[d][0] || 0;
            return d3.time.format('%x')(new Date(dx))
        });

        chart.y1Axis
            .tickFormat(d3.format(',f'));

        chart.y2Axis
            .tickFormat(function(d) { return '$' + d3.format(',f')(d) });

        chart.bars.forceY([0]);
        // http://stackoverflow.com/questions/23754188/nvd3-js-how-to-disable-tooltips-for-one-serie-only
        chart.lines.interactive(false);
        // http://nvd3-community.github.io/nvd3/examples/documentation.html#line
        chart.height(280);
        // If not chart data is avaliable to display:
        chart.noData("There is no Data to display at the moment.");

        // Remove legend:
        chart.showLegend(false);

        d3.select('#chart svg')
            .datum(res)
            .transition().duration(500)
            .call(chart);

        d3.selectAll('.nv-y path').attr('display','none');

        nv.utils.windowResize(chart.update);

        return chart;
    });
}
解决方案

if you want to hide the 1st y axis do:

.nv-y1{
  display:none;
}

if you want to hide the 2nd y axis do:

.nv-y2{
  display:none;
}

http://plnkr.co/edit/IgFh1rV4a6ubAMe0VqT2?p=preview

这篇关于如何隐藏nvd3图表上的第一个Y轴线?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-26 21:36