jqPlot样式-如何删除Y轴线? [英] jqPlot Styling - How to remove Y axis line?

问题描述

jqPlot样式有点麻烦.目前，我已经知道了:

要花很多时间才能使它保持原样，但是现在我遇到了一个问题-左边的线！我不知道如何删除它，因为我实际上不知道它是什么！

这是我到目前为止获得的代码.

  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 }
  });

我觉得这可能与y轴上使用的渲染器有关.当前，它仅使用默认值(我假设是LinearAxisRenderer).如果我将其更改为CategoryAxisRenderer，它将摆脱烦人的行，但是它将显示标记，并使小节顶部的数字不正确(因此可能不会那么有用).

我也浏览了CSS，寻找线的颜色，#757575，但无济于事.我还将该文件中的每个单一颜色更改为突出的颜色(即红色)，但仍然没有任何变化.

我不确定这是否在某处阴影，但是我几乎尝试了所有方法(正确的方法除外)将其删除；还是一无所有.

以前有人遇到过这个问题吗?有什么想法吗?

解决方案

好吧，我仍然没有运气用jqPlot选项来解决问题，我找到了一种解决方案，就是使用CSS隐藏整个y轴.

我只是将其添加到了<style>标记之间的HTML文件中，尽管您当然可以将其放在您使用的任何样式表中.

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

Voila！该死的y轴终于消失了，使我的图形样式优美而整洁.

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?

解决方案

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.

这篇关于jqPlot样式-如何删除Y轴线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！