绘图顶部的 jqplot 网格
jqplot grid on top of plot
我一直在修补一个jqplot图,其中网格线位于图形的顶部(或前面,具体取决于您如何看待它),而不是默认的背景区域。 我已经进行了几次尝试,让它使用 z 索引覆盖网格。 但是,每次尝试都会使整个图形不起作用,并且由于某种未知原因,我没有收到任何错误。
我正在使用一个堆叠的条形图,它实际上填充了整个网格,所以我看不到任何网格线,它们都隐藏在图形下方(或后面)。
这是代码:
<script type="text/javascript" language="javascript">
$.jqplot.config.enablePlugins = true;
var plot;
var data1 = [];
var data2 = [];
var index = 0;
var num = 0;
var delta = 0;
$(document).ready(function(){
for (i=0; i<100; i++) {
num = getRandomNumber();
delta = 100 - num;
index++;
data1.push([ index, num]);
data2.push([ index, delta]);
}
plot = $.jqplot('graph', [data1, data2],{
title: 'my title',
animate: true,
stackSeries: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: { highlightMouseDown: true },
pointLabels: {show: true}
},
series: [ {label: 'one'}, {label: 'two'} ],
seriesColors:['#ff0000', '#0000ff'],
legend: {
show: true,
location: 'e',
placement: 'outsideGrid'
},
grid: {
gridLineColor: '#333333',
borderWidth: 0
},
axesDefaults: {
pad: 0,
padMin: 0
},
axes: {
xaxis: {
showTicks: false,
pad: 0,
padMin: 0,
rendererOptions: { forceTickAt0: true, forceTickAt100: true }
},
yaxis: {
pad: 0,
padMin: 0,
rendererOptions: { forceTickAt0: true, forceTickAt100: true }
}
}
});
});
getRandomNumber = function(){
return Math.floor(Math.random()* 100);
};
</script>
有人遇到这个要求并且知道如何让网格线显示在图表顶部吗? 谢谢
通过一些 DOM 操作,您可以执行此操作,但您需要确保将网格背景颜色设置为透明才能正常工作。 剧情通话后:
gridCanvas = $($('.jqplot-grid-canvas')[0])
seriesCanvas = $($('.jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
这是一个示例小提琴。
相关文章:
- 剑道网格jQuery动画()问题
- 使用Dnamics CRM 2011中的JavaScript读取子网格的所有记录,而不考虑活动页面
- 我可以更改剑道UI网格吗's的外键值
- jqGrid树网格问题
- 在Three.js中导出网格会提高性能吗
- 如何在剑道网格初始化后设置pageSizes
- 在threejs中使用纹理网格和线框网格
- 如何在可分组的剑道网格中设置空数据文本
- 如何在Angular UI网格中选择下一行
- 跟踪jqplot垂直折线图的鼠标位置
- ExtJS网格单元格编辑器,防止焦点松动问题
- 多维数据集网格未在指定的分区中绘制
- 光线投射从内部投射时不会碰到网格
- 使用javascript在MVC中查找网格长度时出错
- 如何刷新AngularJs剑道网格
- 使用导航属性创建Kendo UI网格模型的问题
- ui网格将单元格显示为选择标记
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 使用按钮的Angular UI网格过滤器
- 绘图顶部的 jqplot 网格