近期,在项目里需要使用图表插件,所以在网上找了个jQuery的插件,jqplot,用下来,感觉非常的强大!可以显示折线图,趋势图,柱状图,饼图。官方文档也很详细,但是实际使用中,发现了2个问题,这两个问题都很好解决,只不过官方没有文档记录,所以我就用博客备忘下。
一、自定义X坐标轴渲染:
我的项目纵坐标是普通数据,横坐标是周数(即,第一周,第二周),周数太少的情况下(比如4周),jqPlot会显示0.5周,1周,1.5周,2周,也就是会出现小数。我尝试过设置ticks属性,但是在进行放大缩小之后(highlighter插件提供的功能),坐标轴就会错位,所以我就放弃了(也没有深入研究)。所以我就跟到了jqPlot代码里面,发现,原来自己写一个坐标轴渲染函数是非常简单的:
$(document).ready(function () {
var weekTickFormatter = function (format, val) {
if (typeof val == 'number') {
if ((""+val).indexOf(".") === -1 && val != 0) {
return "Week " + val;
}
return "";
}
else {
return String(val);
}
};
if (data != "") {
var opt = {
axes: {
xaxis: {
tickOptions: { formatter: weekTickFormatter }
},
},
};
$.jqplot('chart', data, opt);
weekTickFormatter就是我写的渲染函数,如果week number是小数,那么就什么都不显示,如果是整数,那么就显示,最终效果如下:
二、把jqPlot渲染出来的图表变成图片:
jqPlot文档里面是没有记录这个功能的,但实际上,他是实现了的,而且实际使用起来非常方便(调用jqplotToImageElem就可以了):
<script class="code" type="text/javascript">
$(document).ready(function () {
var data = <%- jData %>;
if (data != "") {
var opt = {
axes: {
xaxis: { tickOptions: { formatter: weekTickFormatter } }
},
};
$.jqplot('chart', data, opt);
$('input').click(function()
{
var chart = $('#chart');
var str = chart.jqplotToImageElem({backgroundColor: chart.css('background-color')});
$('#image').append(str);
});
}
});
</script>
<input type="button" />
<div id="image"></div>
<div id="chart"></div>
相关源代码如下:
// return the raw image data string.
// Should work on canvas supporting browsers.
$.fn.jqplotToImageStr = function(options) {
var imgCanvas = $(this).jqplotToImageCanvas(options);
if (imgCanvas) {
return imgCanvas.toDataURL("image/png");
}
else {
return null;
}
};
// return a DOM <img> element and return it.
// Should work on canvas supporting browsers.
$.fn.jqplotToImageElem = function(options) {
var elem = document.createElement("img");
var str = $(this).jqplotToImageStr(options);
elem.src = str;
return elem;
};
// return a string for an <img> element and return it.
// Should work on canvas supporting browsers.
$.fn.jqplotToImageElemStr = function(options) {
var str = '<img src='+$(this).jqplotToImageStr(options)+' />';
return str;
};
// Not guaranteed to work, even on canvas supporting browsers due to
// limitations with location.href and browser support.
$.fn.jqplotSaveImage = function() {
var imgData = $(this).jqplotToImageStr({});
if (imgData) {
window.location.href = imgData.replace("image/png", "image/octet-stream");
}
};
// Not guaranteed to work, even on canvas supporting browsers due to
// limitations with window.open and arbitrary data.
$.fn.jqplotViewImage = function() {
var imgStr = $(this).jqplotToImageElemStr({});
var imgData = $(this).jqplotToImageStr({});
if (imgStr) {
var w = window.open('');
w.document.open("image/png");
w.document.write(imgStr);
w.document.close();
w = null;
}
};