4

我在使用 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 但无济于事。我还将该文件中的每一种颜色都更改为突出的颜色(即红色),但仍然没有任何变化。

我不确定这是否是某些东西的阴影,但我已经尝试了几乎所有方法(除了正确的方法)来删除它们;依然没有。

以前有人遇到过这个问题吗?有任何想法吗?

4

5 回答 5

8

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

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

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

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

第 37 行用于演示目的。

于 2013-09-26T18:19:46.203 回答
2

尝试使用:

axes: {
    yaxis: {
       showTicks: false
    }
}

否则它可能是一个边界然后尝试(但你再次设置borderWidth为 0 所以它应该具有相同的效果):

grid:{
    drawBorder: false,
    shadow: false
} 

应用了两个选项的示例。

也可以尝试设置每个轴:

tickOptions: {
    showGridline: false
}
于 2012-07-31T08:50:37.600 回答
2

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

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

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

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

于 2012-08-01T03:57:40.867 回答
0

对我来说,以下确实起到了作用:

我已经设置了borderWidth : 0这正是问题所在,因为设置它激活了它!删除它解决了问题!

于 2012-11-12T09:14:48.480 回答
0

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

我终于设法弄清楚你可以传递 gridLineColor 属性,这样你就可以从 jqPlot 图形参数中隐藏左侧那条烦人的线。

grid: {
  gridLineColor: "#FFFFFF" //or whatever background color you have
}
于 2013-07-24T18:20:28.917 回答