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

【问题标题】：jqPlot Line Chart Not Drawing to Edge of divjqPlot折线图未绘制到div的边缘
【发布时间】：2012-06-28 14:36:37
【问题描述】：

我有一个绘制精美的 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 应用于图表。

【问题讨论】：

非常感谢在可运行的示例中看到问题，例如在jsfiddle.net 上还有一张突出您所追求的图片可能有助于我们更好地了解您。
您仍然可以粘贴一个链接，将您的图片放在其他网站上 :)
我尽我所能来说明它。不幸的是，我无法发布图片，而且我认为我页面的这个组件不够独立，无法使用类似 jsfiddle.net 的东西
不要误会我的意思，我非常感谢这个插图。这只是为了让我理解的抽象:) 所以你希望图片中的蓝色thing'y 到达卷轴的末尾，对吗？如果是这样，那么您用于图表的CSS 是什么？
是的。这样一来，滑块和图表就会一对一地排列在一起，这样选择就更有意义了。

标签： javascript jquery html layout jqplot

【解决方案1】：

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

【讨论】：

【解决方案2】：

我认为你应该用这个来设置最小值、最大值或直接设置刻度。

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

I think you should check out my other answer here. 特别是如果没有任何效果，您应该考虑直接设置刻度。我知道你没有展示它们，但无论如何你可以使用它们作为格式化图表外观的手段。我怀疑您遇到的行为与链接答案的第一个示例中观察到的类似。

【讨论】：

【解决方案3】：

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

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

【讨论】：