jqPlot Styling - How to remove Y axis line?

问题

I'm having a bit of trouble with jqPlot styling. Currently I've got this:

This took quite a bit of fiddling to get it like this as it is, but now I've got one problem -- the line on the left! I don't know how to remove it, because I don't actually know WHAT it is!

This is the code I've got so far.

  plot = $.jqplot('chart', [values], {
    animate: !$.jqplot.use_excanvas,
    seriesDefaults: {
      renderer: $.jqplot.BarRenderer,
      rendererOptions: {
        varyBarColor: true,
      },
      pointLabels: { 
        show: true,
      },
      shadow: false,
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: keys,
        tickOptions: {
          showGridline: false,
          showMark: false,
          fontFamily: 'DosisBold',
          textColor: '#ffffff',
          fontSize: 'larger'
        },
      },
      yaxis: {
        tickOptions: {
          showGridline: false,
          showMark: false,
          showLabel: false,
          shadow: false,
        },
      },

    },
    seriesColors: ["#bc4427", "#df8321", "#949629", "#5e8c41", "#739c9b", "#3483b3"],
    grid: {
      background: '#1d1d1d',
      drawGridLines: false,
      borderWidth: 0.0,
      shadow: false,
    },

    highlighter: { show: false }
  });

I have a feeling it may be something to do with the renderer used on the y axis. Currently it's just using the default one (which I assume is the LinearAxisRenderer). If I change it to CategoryAxisRenderer, it gets rid of the annoying line, but then it shows the marks, and makes the numbers on top of the bars incorrect (so probably isn't going to be that useful).

I've also dug through the CSS, looking for the color of the line, #757575 but to no avail. I also changed EVERY SINGLE COLOR in that file to something that stands out (ie, red), but still nothing changes.

I'm not sure if it's a shadow on something, but I've tried just about every way (except the correct way) to remove them; still nothing.

Has anyone had this problem before? Any ideas?

回答1:

I came across this problem today and I noticed that "drawBaseline" of yaxis was overwritten by drawBaseline of the renderer. One needs to set the drawBaseline option in the rendererOptions as well like so:

axes: {
    yaxis: {
        rendererOptions: {drawBaseline: false}
    }
}

Take a look at this jsFiddle: http://jsfiddle.net/a88MS/1/

To see the issue, comment and uncomment line 38.

Line 37 is there for demonstration purposes.

回答2:

Try using the:

axes: {
    yaxis: {
       showTicks: false
    }
}

Otherwise it might be a border then try (but then again you set borderWidth to 0 so it should have the same effect):

grid:{
    drawBorder: false,
    shadow: false
}

A sample with both options applied.

Also maybe try setting to each axis:

tickOptions: {
    showGridline: false
}

回答3:

Well, I with still no luck in sorting the issue out using jqPlot options, I found a solution in just hiding the entire y-axis using CSS.

I just added this to the HTML file between the <style> tags, though of course you'd be able to put it in whatever stylesheet you're using.

.jqplot-grid-canvas {
    display: none;
}

Voila! The damned y-axis is finally gone, leaving my graph styling nice and purdy.

回答4:

For me the following did do the trick:

I had set borderWidth : 0 which exactly was the problem, as setting it activated it! Removing it solved the problem!

回答5:

I also had this same issue however I really didn't want to fix it with custom css.

I finally managed to figure out you can pass the gridLineColor attribute so you can hide that annoying line on the left hand side from the jqPlot graph parameters.

grid: {
  gridLineColor: "#FFFFFF" //or whatever background color you have
}

来源：https://stackoverflow.com/questions/11732651/jqplot-styling-how-to-remove-y-axis-line

标签

jqplot