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

Question

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

如何指定此行为？我已经把 margins/bounds 弄乱了，但它很脆弱。

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();

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

Decrease padding between dimple.js chart and axes

javascript

charts

dimple.js