最近实用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 是一个基于 jQuery 的数据可视化库,专为网页上的数据图表展示设计。它提供了一套全面的API,使得开发者能够方便地创建各种复杂的图表,如折线图、柱状图、饼图以及散点图等。jqPlot 被誉为...
### jqPlot文档解析 #### 简介 jqPlot 是一个纯 JavaScript 绘图插件,为 jQuery 提供了强大的图表绘制功能。该插件版本为 1.0.8,自 2009 年至 2015 年由 Chris Leonello 开发并维护。它支持在个人或商业项目中...
**jqPlot 概述** jqPlot 是一个基于 jQuery 的数据可视化库,用于创建高质量的、交互式的图表。它提供了一套全面的API和各种图表类型,适用于数据展示和分析。jqPlot 具有高度可定制性,允许用户通过配置选项自定义...
以下是一些常用选项的解释: - `seriesColors`:定义默认分类的颜色,当有多个分类时,会按顺序分配这些颜色。 - `stackSeries`:如果设为true,表示每个分类的值将是前一个分类值的累计,适用于堆积图。 - `title`...
**jqPlot**是一款基于JavaScript库**jQuery**的图表绘制插件,主要用于在Web页面上创建各种数据可视化图表,包括但不限于柱状图、折线图、饼图、散点图等统计图表。它提供了丰富的定制选项,可以满足用户对图表样式...
《jqPlot 1.0.4:打造丰富的数据可视化图表》 jqPlot 是一款功能强大的JavaScript图表库,专为Web应用程序提供丰富的数据可视化解决方案。在版本1.0.4中,它延续了其一贯的优秀特性,使得创建饼状图、柱状图、线状...
### jqplot的Option配置详解 #### 一、引言 jqPlot是一款强大的JavaScript图表库,它基于jQuery构建,能够帮助开发者轻松地创建出各种复杂的图表。对于初学者来说,掌握jqPlot的核心配置对象—Option配置对象是十分...
**jqPlot饼状图示例** jqPlot是一个强大的JavaScript库,用于在网页上创建动态、交互式的图表。它提供了一套丰富的选项和插件,使得数据可视化变得简单易行。在本示例中,我们将专注于如何使用jqPlot来创建饼状图,...
**jqPlot简介** jqPlot是基于JavaScript的图表库,它提供了丰富的图表类型,如曲线图、柱状图和饼图,适用于数据可视化需求。这款开源工具以其灵活性和易用性著称,允许开发者轻松地创建交互式图表,适用于网页应用...
用JS作图形报表,有多个插件可选择,其中HighCharts、JqPlot、JsChart是使用比较多的,但HighCharts和JsChart只能用作个人使用、为了以后项目中能使用,很多人选择JqPlot(个人和商业都免费)。俺最近开发项目进要...
**jqPlot简介** jqPlot是基于JavaScript的图表绘制库,它允许开发者在网页上创建出交互式的、富有视觉吸引力的图表。jqPlot以其高度可定制性、灵活性和强大的功能著称,适合各种类型的数据可视化需求,包括折线图、...
**jQuery.jqPlot图表源码详解** jQuery.jqPlot是一款基于JavaScript的开源图表库,它提供了丰富的图表类型,包括折线图、柱状图、饼图、散点图等,适用于网页上的数据可视化。该库设计简洁,易于使用,允许开发者...
**jQuery图表插件jqPlot详解** jqPlot是jQuery的一个强大插件,专为创建美观、交互式的图表而设计。在Web开发中,数据可视化是一项重要的任务,jqPlot提供了一个易于使用且功能丰富的解决方案,使开发者能够轻松地...
**jqPlot绘图插件详解** jqPlot是基于jQuery的一款强大而灵活的图表绘制插件,它提供了丰富的功能,能够帮助开发者轻松创建出各种类型的图表,包括但不限于线状图、柱状图、饼图等。这款插件以其简洁的API和高度...
**jqPlot柱状图详解** jqPlot是一款强大的JavaScript图表库,它允许开发者在网页上创建交互式的、高质量的图表。柱状图是数据可视化中常用的一种图表类型,它以竖直的柱子长度来表示各类别数据的大小,非常适合展示...
`jqPlot`是一款强大的JavaScript图表绘制插件,它提供了丰富的图表类型和高度自定义的选项,使得开发者能够轻松地在网页上创建出交互式的、美观的数据图表。本DEMO——"fusionChars, highchars, jqplot绘图插件Demo...
**Jqplot - jQuery数据图插件** Jqplot是一款基于jQuery库的开源图表插件,主要用于在网页上创建各种动态、交互式的数据可视化图表。它以其丰富的图表类型、高度可定制性和良好的性能赢得了广大开发者的青睐。在...
没啥可描述的,就是用jqplot做的例子,无语了,这还有文字限制,一点都不自由。
jqPlot是一款基于JavaScript的开源图表库,用于在Web页面上绘制动态、交互式的图表。它提供了丰富的选项和插件,可以生成多种类型的图表,包括折线图和柱状图。以下是对 jqPlot 在生成折线图和柱状图方面的详细说明...