jqPlot 样式 - 如何删除 Y 轴线？答案

【问题标题】：jqPlot Styling - How to remove Y axis line?jqPlot 样式 - 如何删除 Y 轴线？
【发布时间】：2012-07-31 03:26:38
【问题描述】：

我在使用 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

【解决方案1】：

我今天遇到了这个问题，我注意到yaxis的“drawBaseline”被渲染器的drawBaseline覆盖了。需要在 rendererOptions 中设置 drawBaseline 选项，如下所示：

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

看看这个 jsFiddle：http://jsfiddle.net/a88MS/1/

要查看问题，请评论并取消注释第 38 行。

第 37 行用于演示目的。

【讨论】：

【解决方案2】：

尝试使用：

axes: {
    yaxis: {
       showTicks: false
    }
}

否则它可能是一个边框然后尝试（但你再次将borderWidth设置为0，所以它应该具有相同的效果）：

grid:{
    drawBorder: false,
    shadow: false
}

A sample with both options applied.

也可以尝试设置每个轴：

tickOptions: {
    showGridline: false
}

【讨论】：

我尝试了这些选项中的每一个，但不幸的是他们没有成功......我会继续抨击它。感谢您的尝试！
@Boro 你能帮我，我怎样才能为一张图制作这个小提琴jsfiddle.net/Boro/TfUfD/2，因为在输出中这显示了两张图？
@PankajKumar 我不确定这里有什么问题。我在那里看到一个图表。请提交一个新问题，您可以在其中详细说明您的问题。
@Boro stackoverflow.com/questions/12898047/… 是问题......我的同事在这里发布。其实我问的是单条吧。

【解决方案3】：

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

我只是将它添加到 HTML 文件的 <style> 标记之间，当然您可以将它放入您正在使用的任何样式表中。

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

瞧！该死的 y 轴终于消失了，让我的图形样式漂亮而朴素。

【讨论】：

【解决方案4】：

对我来说，以下确实可以解决问题：

我设置了borderWidth : 0，这正是问题所在，因为设置它激活了它！删除它解决了问题！

【讨论】：

【解决方案5】：

我也遇到了同样的问题，但是我真的不想用自定义 css 来修复它。

我终于想通了，你可以传递 gridLineColor 属性，这样你就可以从 jqPlot 图形参数中隐藏左侧那条烦人的线。

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

【讨论】：