减少 dimple.js 图表和轴之间的填充

Question

我正在创建包含 7 个或更少点的图表。我的页面还允许在图表类型之间切换。
所有图表都很好，除了面积图在图表两侧和轴之间有相当大的空白。它看起来不太好，尤其是与其他图表不同。我希望图表占据整个图表区域。我注意到当有很多点时，轴旋转 90°，图表占据了全部空间。

如何指定这种行为？我弄乱了边距/边界，但它很脆弱。

http://jsbin.com/rihoredoja/1/edit

Answer 1

这是因为您在 x 上使用了一个类别轴，该轴以固定间隔排列每个点。您的图表会更适合时间轴：

var svg = dimple.newSvg("#chartContainer", 600, 400),
    data = [
      { "year": "1998", "val": 123456789 },
      { "year": "1999", "val": 234567890 },
      { "year": "2000", "val": 234567890 },
      { "year": "2001", "val": 123456789 },
      { "year": "2002", "val": 134567890 },
      { "year": "2003", "val": 123456789 },
      { "year": "2004", "val": 234567890 }
    ],
    c = new dimple.chart(svg, data),
    x = c.addTimeAxis("x", "year", "%Y", "%Y"),
    y = c.addMeasureAxis("y", "val"),
    s = c.addSeries(null, dimple.plot.area);

c.draw();