最近实用jqplot,要求在pie chart 上显示label,和value,并且具有highlight的功能,对于pie来说,应该是原生不支持的,需要我们自己去添加功能。到网上找了一下,发现国内的网站全是将参数介绍一下,几乎内容是一样的,最后还是在stackoverflow中找到答案。代码如下:
function pieCommon(target,data,options) {
if (data == undefined || !$.isArray(data)){
return;
}
var rawData = data[0];
var inputLabels = [];
var inputValues =[];
for (var key in rawData) {
inputLabels[key] = rawData[key][0];
inputValues[key] = rawData[key][1];
}
$.jqplot.postDrawHooks.push(function() {
var swatches = $('table.jqplot-table-legend tr td.jqplot-table-legend-swatch');
var labels = $('table.jqplot-table-legend tr td.jqplot-table-legend-label');
labels.each(function(index) {
//turn the label's text color to the swatch's color
var color = $(swatches[index]).find("div div").css('background-color');
$(this).css('color',color );
//set type name as the label's text
$(this).css('white-space', 'nowrap'); //otherwise Heavy Industry M12 will be in 3 lines
$(this).html(inputLabels[index]);
});
});
var total = 0;
for (var i = 0; i < counts.length; i++) {
total += inputValues[i];
}
var resultData = [];
var precision = 2;
var percentageSoFar = 0;
for (var i = 0; i < counts.length; i++) {
var count = counts[i];
//get value
var percentage = parseFloat((count / total * 100).toFixed(precision));
if (i == counts.length - 1) {
/*
* if we would use just '100 - percentageSoFar' instead
* in case we add 20 as the 4th value to counts array
* we will get 29.849999999999994
*/
percentage = parseFloat((100 - percentageSoFar).toFixed(precision));
console.log("last count is = " + count + "; percentage is = " + percentage);
}
percentageSoFar += percentage;
var row = [inputLabels[i] + ":" + percentage , percentage];
resultData.push(row);
}
var plot = jQuery.jqplot(target, [resultData], {
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
// Add a margin to seperate the slices.
sliceMargin: 4,
// stroke the slices with a little thicker line.
lineWidth: 5,
dataLabelPositionFactor: 1.35,
dataLabels: 'label',
dataLabelFormatString: '%s'
}
},
legend: {
show: true,
location: 'ne',
placement: "outside"
}
});
//add highlight function
$('#' + target).bind('jqplotDataHighlight',
function (ev, seriesIndex, pointIndex, data, radius) {
var chart_left = $('#' + target).offset().left,
chart_top = $('#' + target).offset().top,
x = ev.pageX, // convert x axis unita to pixels
y = ev.pageY; // convert y axis units to pixels
var color = 'rgb(50%,50%,100%)';
if ($('#'+ target + 'tooltip1b').length <= 0){
var tips = $('<div></div>');
tips.attr('id',target + 'tooltip1b');
$('#' + target).append(tips);
}
$('#'+ target + 'tooltip1b').css({
left:chart_left+x+5,
top:chart_top+y,
position: 'absolute',
zIndex: 99,
backgroundColor:'#FFFFFF'
});
$('#'+ target + 'tooltip1b').html('<span style="font-size:14px;font-weight:bold;color:' +
color + ';">' + data[0] + '</span><br />');
$('#'+ target + 'tooltip1b').show();
});
// Bind a function to the unhighlight event to clean up after highlighting.
$('#'+ target).bind('jqplotDataUnhighlight',
function (ev, seriesIndex, pointIndex, data) {
if ($('#'+ target + 'tooltip1b')) {
$('#'+ target + 'tooltip1b').empty();
$('#'+ target + 'tooltip1b').hide();
}
});
}
同理bar chart的增加tooltip的code
$('#chart').bind('jqplotDataHighlight',
function (ev, seriesIndex, pointIndex, dt) {
var mouseX = ev.pageX; //these are going to be how jquery knows where to put the div that will be our tooltip
var mouseY = ev.pageY;
var color = '#666';
if ($('#chartpseudotooltip').length <= 0) {
var toolstip = $('<div></div>').attr('id','chartpseudotooltip');
$("#chart").append(toolstip);
}
$('#chartpseudotooltip').html('<span style="font-size:14px;font-weight:bold;color:' +
color + ';">' + data[pointIndex][0] + ', ' + dt[1] + '</span>');
var cssObj = {
'position' : 'absolute',
'left' : mouseX + 'px', //usually needs more offset here
'top' : mouseY + 'px',
'backgroundColor': 'rgba(208, 208, 208, 0.5)'
};
$('#chartpseudotooltip').css(cssObj);
$('#chartpseudotooltip').show();
}
);
$('#chart').bind('jqplotDataUnhighlight',
function (ev) {
$('#chartpseudotooltip').hide();
}
);
分享到:
相关推荐
jqplot
jqplot官方文档,包含所有的api。 居家旅行必备
官方jqplot chart 例子,非常丰富。应有尽有。。
用JS作图形报表,有多个插件可选择,其中HighCharts、JqPlot、JsChart是使用比较多的,但HighCharts和JsChart只能用作个人使用、为了以后项目中能使用,很多人选择JqPlot(个人和商业都免费)。俺最近开发项目进要...
jqplot插件的option对象属性的配置描述
没啥可描述的,就是用jqplot做的例子,无语了,这还有文字限制,一点都不自由。
jqPlot图表中文API使用文档及源码和在线示例实例_所有属性详解
jqplot 是jquery 的一个插件主要是用于在网页上绘制图表 统计图
jqPlot实际开发源代码例子30例。 jqPlot是 一款基于jquery类库的图标绘制插件。 兼容所有浏览器。 通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且,jqPlot具有插件可扩展性 (Pluggability),你...
jqplot饼状统计图,很鲜明很简单的例子。如需其他图形只需改动小部分即可。
jqplot 简易示例 ,没有数据交互,
jqplot中文API帮助文档.pdf
强大的Jquery图表绘制插件 —— jqPlot jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且,jqPlot具有插件可扩展性(Pluggability),你可以编写自己的...
jqplot柱状图示例,加鼠标移动,示例+JS
读取XML文件中的数据,解析后用jqplot曲线图的形式表示
一个通过jqplot完整的生成折线图和柱状图例子
非常好用的Jquery的画图插件-jqPlot。
运用jqplot能够画线图、饼图,效果优美,是一个很强大的jquery插件.
jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图、柱状图和饼图。jqPlot支持为图表设置各种不同的样式。提供Tooltips,数据点高亮显示等功能。主要功能包括[1]: 1、有多种图表样式可供选择 2、可以自定义...