jqPlot样式 - 如何移除Y轴线？

Question

我在使用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，但没有发现。我还将该文件中的每个颜色都更改为醒目的颜色（例如红色），但仍然没有任何变化。

我不确定这是否是某些东西的阴影，但我已经尝试了几乎所有方法（除了正确的方法）来去掉它们，但仍然没有任何变化。

有人遇到过这个问题吗？有什么想法吗？

- Jarrod Robins

Answer 1

今天我遇到了一个问题，注意到yaxis的“drawBaseline”被渲染器的“drawBaseline”覆盖了。需要在rendererOptions中设置drawBaseline选项，像这样:

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

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

为了查看问题，请注释和取消注释第38行。

第37行仅用于演示目的。

- ymas

Answer 2

尝试使用以下方法：

axes: {
    yaxis: {
       showTicks: false
    }
}

否则，可能是边框问题，那么请尝试（但是你已将borderWidth设置为0，所以应该会产生相同的效果）：

grid:{
    drawBorder: false,
    shadow: false
} 

这是一个同时应用两种选项的示例。

另外，也可以尝试为每个轴进行设置：

tickOptions: {
    showGridline: false
}

- Boro

---

我尝试了这些选项，但不幸的是它们都没有起作用... 我会继续努力解决它。谢谢你的尝试！ - Jarrod Robins

@Boro，你能帮我吗？我该如何将这个fiddle http://jsfiddle.net/Boro/TfUfD/2/ 调整为只显示一个图表，因为当前的输出中显示了两个图表？ - Pankaj Kumar

@PankajKumar 我不确定这里的问题是什么。我只看到一个图表。请提交一个新问题，您可以详细说明您的问题。 - Boro

@Boro 这是我同事在 Stack Overflow 上发布的问题：http://stackoverflow.com/questions/12898047/implement-graph-using-jqplot。实际上，我只是想问关于单个柱状图的问题。 - Pankaj Kumar

Answer 3

尽管我使用了jqPlot选项，但仍然无法解决问题，最终我通过使用CSS隐藏整个y轴来找到了解决方案。

我只需将以下内容添加到HTML文件的<style>标签之间即可，当然您也可以将其放在任何样式表中。

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

哎呀！该死的y轴终于消失了，我的图表样式看起来很漂亮。

- Jarrod Robins

Answer 4

我也遇到了同样的问题，但我真的不想用自定义CSS来解决它。

最终我设法找出可以通过传递gridLineColor属性来隐藏jqPlot图形参数左侧的那条烦人的线。

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

- David Tengdin

Answer 5

对我来说，以下内容解决了问题：

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

- col.panic