nvd3 line chart, how to remove gridlines and yaxis

问题

I have made a line chart with view finder.

Here is my initial code

     var chart = nv.models.lineWithFocusChart();

 // chart.transitionDuration(500);
  chart.xAxis
      .tickFormat(d3.format(',g'));
  chart.xAxis
        .axisLabel("Date");
  chart.xAxis.tickPadding(0);


  chart.x2Axis
      .tickFormat(d3.format(',g'));




  chart.yAxis
      .tickFormat(d3.format(',.2g'));
  chart.y2Axis
      .tickFormat(d3.format(',.2h'));
 // chart.showYAxis(false);

I want to remove the y axis labels ( i.e. i want no number showing on the y axis).

I also want to remove all the gridlines.

is there something like chart.yAxis.somethinghere to do this?

Thanks

回答1:

To remove tick on y-axis

.nv-axis.nv-y .tick line {
        display:none;
    }

To remove tick on x axis

.nv-axis.nv-x .tick line {
        display:none;
    }

To remove label on x axis

.showXAxis(false)

To remove label on y axis

.showYAxis(false)

To remove all the grid lines

.nv-axis .tick line {
        display:none;
    }

回答2:

.showYAxis(false) should remove the y axis.

If that doesn't work, you can apply .nv-y text{display: none;} as a style.

Use the style .tick line {display: none;} to get rid of grid lines, and keep x axis.

Get rid of all axis and lines with .tick{display: none;}

回答3:

To remove the gridlines:

    .nv-axis .tick line {
        display:none;
    }

And axes can be done more straightforwardly:

.showYAxis(false)
.showXAxis(false)

回答4:

To hide grid line, just add this to your css

.tick line {
display: none;
}

and for the X Axis just add .showYAxis(false)

if you want to delete only the yAxis line and keep the ticks you can do it with the CSS:

.nvd3 .nv-axis.nv-y path.domain{
 stroke-opacity: 0;
}

see this plunker for example.

来源：https://stackoverflow.com/questions/22055289/nvd3-line-chart-how-to-remove-gridlines-and-yaxis

标签

charts

line

nvd3.js

gridlines