将绘图图表相对于绘制的图表居中而不是画布大小。

时间:2014-06-25 23:29:02

标签: javascript html5 canvas flot

嘿,我正在开发相当广泛使用Flot图表的应用程序。我的经理责成我以#34;为中心"这些图表因为他不喜欢他们现在的样子。

默认情况下,它们使用画布大小生成,在y轴上为数据留出空间,这会导致画布居中的偏移,使图表向右略微偏移。

我知道这是一个挑剔的问题,但我想知道是否有一种可以轻松实现的方法使图表中心相对于图表本身,可能是通过将右侧画布扩展到等于左边,或者通过使y轴以文本形式生成,只留下图表作为画布。

我试图通过flot API阅读解决方案,但没有任何明显的事情发生在我身上。

1 个答案:

答案 0 :(得分:2)

如果我正确理解你,你正在寻找网格的边距property

grid:{
    margin:{
       right: 17,
       top: 17
    }
}

请参阅小提琴here

FOR COMMENT

要动态设置右边距等于左边距,我会让flot绘制一次图,将右边距设置为等于y轴的宽度,然后重绘图:

p = $.plot( ...
p.getOptions().grid.margin.right = p.getYAxes()[0].box.width;   
p.setupGrid();
p.draw();

更新了fiddle。多次运行以查看它是如何动态工作的。