wj-flex-chart 的坐标轴背景色以及与边框距离能否设置

登录

设置这个边距的原因是，在手机上看图表时，图表曲线太窄了（如下图），想尽量显示大一些，于是把图例也取消了。想问能否把坐标轴和左右边框的边距设置小一些。
另外就是，因为取消了图例，所以我增加了两个坐标轴顶端的文字显示，用文字的颜色与曲线颜色进行对应。想问下能否设置整个坐标轴的背景色，这样用户更容易把曲线和坐标轴对应起来看。

Alice · Alice

谢谢您的反馈。
您可以通过css设置样式，代码参考：

/* set default chart style */
.wj-flexchart {
height: 400px;
background-color: white;
box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
padding: 8px;
margin-bottom: 12px;
}

复制代码

轴的部分就是指的轴的line，然后它上面有label显示文字，以及title 显示标题。
它的背景其实就是chart的部分。
这部分是通过轴的itemFormatter就能实现的，代码参考：

chart.axisY.itemFormatter = function(engine, label) {
if(label.val > 5){
engine.textFill = 'red'; // 红色文本
label.cls = null;// 没有默认的 CSS
}
return label;
}

复制代码

carl_chen · carl_chen

本帖最后由 carl_chen 于 2017-3-25 11:09 编辑

Alice 发表于 2017-3-23 17:49
谢谢您的反馈。
您可以通过css设置样式，代码参考：

谢谢 Alice的回答。我测试您给的方法，有作用。
我的代码如下：

.wj-flexchart {
padding: 0px;
background-color: lightblue;
box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
height: 250px;
margin: 20px;
}

复制代码

效果如下图，整个 chart的上下左margin变化了（不知道右margin为什么是0

），如图红线标出的距离是由padding控制的，也变小了，不过似乎还是有点大。

我把代码中的 margin: 20px; 去掉后，效果如下图：

Alice · Alice

carl_chen 发表于 2017-3-25 10:56
谢谢 Alice的回答。我测试您给的方法，有作用。
我的代码如下：

从图上看，chart还有滚动条。
滚动条对布局也有影响。

carl_chen · carl_chen

Alice 发表于 2017-3-27 10:13
从图上看，chart还有滚动条。
滚动条对布局也有影响。

截图顶部的滚动条是grid控件的。不好意思，截的有点多

Alice · Alice

carl_chen 发表于 2017-4-1 14:39
截图顶部的滚动条是grid控件的。不好意思，截的有点多

嗯嗯。
还有什么需要我协助的问题么？
最好有个可以重现的Demo

		自动登录	找回密码
密码			立即注册

wj-flex-chart 的坐标轴背景色以及与边框距离能否设置

本帖子中包含更多资源

5 个回复

本帖子中包含更多资源

悬赏达人

活字格认证

微信认证勋章

元老葡萄