jqplot,删除外部边界 [英] jqplot, remove outside border
问题描述
如何删除jqplot的外边界,请看以下屏幕截图. 我尝试了不同的选项并进行了搜索,但是我没有找到解决方案.
How to remove outside borders of jqplot, Please take a look at following screenshot. I tried with different options and searched for it, ButI didn't get a solution.
这是我的代码,
plot1 = $.jqplot(container, [data], {
title: 'title',
animate: true,
animateReplot: true,
seriesColors:['#00ADEE'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
shadow: false
},
axesDefaults: {
},
highlighter: {
tooltipAxes: 'y',
show: true,
tooltipLocation: 'sw',
formatString: '<table class="jqplot-highlighter"> \
<tr><td>test:</td><td>%s</td></tr></table>'
},
grid: {borderColor: 'transparent', shadow: false, drawBorder: false, shadowColor: 'transparent'},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks:ticks
},
yaxis: {
max:1000
}
}
});
请帮帮我.预先感谢.
这是JsFiddle 链接,我要删除外部边框.
Here is the JsFiddle link, I want to remove the outside border.
推荐答案
You can register a custom function in postDrawHooks, to be fired after plugin initialization.
想法是使用此功能在图表顶部绘制一个白色边框矩形,从而使外部边框不可见.
The idea is to use this function to draw a white border rectangle on top of the chart, that makes the outside borders invisible.
$.jqplot.postDrawHooks.push(function() {
var $canvasMain = $("#chart1 canvas.jqplot-grid-canvas"),
$canvasLines = $("#chart1 canvas.jqplot-series-canvas"),
canvasSize = {
x: parseInt($canvasLines.attr('width')),
y: parseInt($canvasLines.attr('height'))
},
ctx = $canvasMain[0].getContext('2d');
ctx.strokeStyle = 'white';
ctx.lineWidth = 6; // 6 to hide shadows and the larger bottom side
ctx.rect($canvasLines.position().left,
$canvasLines.position().top,
canvasSize.x,
canvasSize.y + 3);
ctx.stroke();
});
您可以看到外部边界消失了:
You can see that the outside borders are gone:
这很好用,但是我个人将继续修改源代码以跳过外部边界.该插件已获得GPLv2和MIT的双重许可,因此我认为该路线没有问题.
This works fine, but personally I would just go ahead and modify the source to skip the outside borders. The plugin is double licensed with GPLv2 and MIT, so I guess there are no problems going that route.
我发现,如果您对此进行更改
I found out that if you change this
grid: {borderColor: 'transparent', shadow: false, drawBorder: false, shadowColor: 'transparent'},
到
grid: {borderColor: 'white', shadow: false, drawBorder: true},
外部边界消失了(类似于我上面所做的事情),但是在x轴上仍然出现了一些刻度线.我已将showTickMarks: false
设置为未成功.
the outside border disappears (kind of what I do above), but still some tick marks on x axis appear. I've set showTickMarks: false
to no success.
请参见 jsFiddle
这篇关于jqplot,删除外部边界的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!