2
A
回答
2
我觉得真的flot
错过了机会,在这里允许用户指定一个函数产生填充,而不只是颜色或渐变。我对代码here做了一个简单的修改,并创建了一个pull请求(虽然github看起来被抛弃了,但我不确定他们是否有人接受这个请求)。
随着这一变化,可以“带”条是这样的:
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="[email protected]" data-semver="0.8.2" src="https://rawgit.com/larsenmtl/flot/master/jquery.flot.js"></script>
</head>
<body>
<canvas id="pattern" width="20" height="20" style="display:none"></canvas>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script>
$(function() {
var p_can = $('#pattern').get(0),
p_ctx = p_can.getContext('2d');
p_ctx.beginPath();
p_ctx.moveTo(0,0);
p_ctx.lineTo(20,20);
p_ctx.stroke();
var d1 = [
[0, 1],
[2, 8],
[4, 5]
];
$.plot($("#placeholder"), [{
data: d1,
bars: {
show: true,
fill: function(a,b) {
var ctx = $('#placeholder>canvas').get(0).getContext('2d');
return ctx.createPattern(p_can, 'repeat');
}
}
}], { });
});
</script>
</body>
</html>
在这里,我创建一个额外的canvas元素,绘制一个45度线,然后使用该为条形图创建填充图案。
+0
这看起来不错:) –
相关问题
- 1. 条纹到条纹转移
- 2. CG中的纹理线条
- 3. 条纹
- 4. 条纹@SessionScope隐藏条纹:错误
- 5. 银条纹条件验证
- 6. 与条纹
- 7. 条纹元
- 8. 黑色条纹
- 9. 条纹付款
- 10. 条纹认证
- 11. 条纹订阅
- 12. postgres:SQL和条纹?
- 13. 条纹订阅
- 14. 变量条纹
- 15. 条纹线出现无处不在
- 16. 设置条纹线的尺寸
- 17. 指纹擦除显示黑色线条
- 18. 用纹理或雪碧画一条线
- 19. 角度条纹 - 将条纹付款表格转换为条纹元素
- 20. 用三条垂直线(条纹)创建一个形状
- 21. 在Java中使用for循环的重复线条/条纹
- 22. 在混合图表中对齐线条和条纹
- 23. 条纹连接费
- 24. jqGrid斑马条纹
- 25. 条纹API余额
- 26. 条纹订阅期
- 27. 条纹类的div
- 28. PHP条纹集成
- 29. jQuery的条纹行
- 30. Laravel和Mobile条纹
Flot不支持此功能,它仅支持纯色和垂直[渐变](https://github.com/flot/flot/blob/master/API.md#specifying-gradients)。 – Raidri