2

我有一个绘制精美的 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 声明中的“样式”属性外，没有任何 CSS 应用于图表。

4

3 回答 3

2

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

于 2012-07-30T16:02:22.250 回答
0

我认为你应该对这个做的是设置最小值、最大值或直接设置刻度。

顺便说一句，图片显示您正在使用日期，但在选项中我看到您不使用DateAxisRenderer，为什么会这样？

我认为您应该在这里查看我的其他答案。特别是如果没有任何效果，您应该考虑直接设置刻度。我知道您没有显示它们，但无论如何您可以使用它们作为格式化图表外观的方法。我怀疑您会遇到与链接答案的第一个示例中观察到的类似行为。

于 2012-06-29T10:02:18.767 回答
0

我自己的一些观察：我通过将 xaxis/yaxis:pad 设置为 1而不是0 来使其工作。

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

于 2013-05-28T07:28:47.687 回答