Question

我有一个精美绘制的jqPlot线图，但是我无法将它绘制到它所包含的div的边缘（这对我的应用程序至关重要）。我已经尝试了它的所有选项，我可以与删除边距，填充等有关，并且最后仍然存在相当大的差距。此外，我已经确认div本身一直到达页面的右边缘。下面是我的情节选项代码：

optionsObj = {
  stackSeries: true,
  axesDefaults: {
    show: false,
    showTicks: false,
    showTickMarks: false
  },
  axes: {
    grid: {
      drawBorder: false
    },
    xaxis: {
      pad: 0,
      tickOptions: {
        showGridline: false
      }
    },
    yaxis: {
      pad: 0,
      tickOptions: {
        showGridline: false
      }
    }
  },
  grid: {
    background: '#ffffff',
    borderColor: '#888888',
    borderWidth: 0.5,
    shadow: false
  },
  seriesDefaults: {
    lineWidth: 0.5,
    color: '#1A95ED',
    fill: true,
    markerOptions: {
      show: false
    }
  },
  series: seriesGroup,
  gridPadding: { top: 0, right: 0, bottom: 0, left: 0 }
};

可在此处找到图片：https://www.dropbox.com/s/js32405l6z16f2m/Capture.PNG

滑块用于选择此图形的子集，该图形在上面的较大图中绘制。问题是，因为图形向左略微缩放并且没有填充与滑块相同的长度，所以选择关闭。例如，左手柄认为它位于第二个峰值的左侧，而右手柄则认为它位于第四个峰值的左侧。

对于那些不熟悉jqPlot的人，有一个div声明：

<div id="overview" style="width:100%;height:200px"></div>

函数调用引用了它：

$.jqplot('overview', eval('([' + sessionStorage.throughputData + '])'), optionsObj);

除了HTML声明中的“style”属性外，没有CSS应用于图表。

Answer 1

我注意到线路关闭的数量会根据图表中的数据点数而变化。我做了一些实验，并最终发现jqPlot在决定每个单元应该得到多少像素时，试图倾向于图表总宽度的“漂亮”单位数。例如，当我有1440个数据点时，图表本身的范围将是1600，而我的数据不会一直到最后。当我有2880个数据点时，图表的范围将是3000，并且我的数据将再次填满它，但它关闭的数量将会改变。我最终手动设置图表的“最小”和“最大”值以匹配我的数据，并且它是固定的。

Answer 2

我认为你应该做的就是设置最小值，最大值或直接设置滴答。

BTW图片显示你正在使用日期，但在选项中我看到你没有使用DateAxisRenderer，为什么会这样呢？

I think you should check out my other answer here.特别是如果什么都不起作用，你应该考虑直接设置滴答。我知道你没有展示它们，但无论如何你可以使用它们作为格式化图表外观的方法。我怀疑你会遇到与链接答案的第一个样本中观察到的相似的行为。

Answer 3

我自己的一些观察：我通过将xaxis / yaxis：pad设置为1 而不是 0来实现它。

我认为pad会乘以rage（min和max）来给出图表中的实际范围。这将解释@brandon注意到的行为。还要确保范围是刻度的偶数或倍数。我不太确定，你必须尝试这个。使用一组11个值，我在两端都有空格，但是一组10个值在两端都是齐平的。

jqPlot折线图未绘制到div的边缘

3 个答案: