我有一个用拉斐尔创建的饼图。我有一个表单复选框，单击该复选框时，我想将“效果”附加到饼图中。这个例子试图通过在 inGlowFun() 之后创建一个带有渐变的圆圈来附加一个内部发光。
function allPie(){
var pie;
Raphael.fn.renderPie = function(cx,cy,r,values,total) {
var canvas = this,
radian = Math.PI / 180,
chart = this.set();
function createSlice(cx, cy, r, startAngle, endAngle, params) {
var x1 = cx + r * Math.cos(-startAngle * radian),
x2 = cx + r * Math.cos(-endAngle * radian),
y1 = cy + r * Math.sin(-startAngle * radian),
y2 = cy + r * Math.sin(-endAngle * radian);
return canvas.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
}
var angle = 90,
process = function (j) {
var value = parseInt(values[j].spend, 10),
angleplus = 360 * value / total,
p = createSlice(cx, cy, r, angle - angleplus, angle, {fill: values[j].pieColour, stroke: "#FFF", "stroke-width": 1});
values[j].slice = p;
angle -= angleplus;
chart.push(p);
};
function glowFun(){
canvas.circle(cx, cy, 140).attr({fill:"r#fff-#fff:96-#CCC", "stroke-width": 0});
}
// creating each pie slice
for (var i = 0, ii = values.length; i < ii; i++) {
process(i);
}
//create inner gradient
function hollowFun(){
canvas.circle(cx, cy, 120).attr({fill:"85-#fff-#CCC", "stroke-width": 20, "stroke": "#FFF", 'opacity': 0.000001} );
}
// inner glow (I admit this is a bit of a hack but it keeps it simple)
function inGlowFun(){
canvas.circle(cx, cy, 55).attr({fill:"r#fff-#fff:85-#CCC", "stroke-width": 2, "stroke": "#FFF"});
}
if(box.checked){
inGlowFun();
}
// returning the whole set of nodes for interactions later
return chart;
};
// creating a namespace for this code so that anything we create won't effect other JavaScript on the page
var dotNet = window.dotNet || {};
/*
a function that parses the data contained in the data table, creates the Raphaël object we're drawing too and calls our Raphaël plug-in
$source - reference to the data source (an HTML table in this example)
$container - reference to the HTML element we're creating the chart inside
*/
dotNet.makePie = function($source, $container, pie) {
var pie;
/*
few constannt variables for this function
pieData - an empty array that will hold an object for each section
totalSpend - the grand total of all the rows (calculated via code for greater accuracy)
*/
var pieData = [],
totalSpend = 0;
/*
function to parse each table row, create HTML and attach events
i - index of the iteraction
*/
function prepare(i) {
/*
variables used for each call
row - jQuery object of the current table row
values - an empty object that will be filled with data and references associated with each row
head - jQuery object used to reference the th of the current row
*/
var row = $(this),
values = {},
head = row.find('.tabh');
// grabbing the numeric total for the row and assigning to values
values.spend = row.find('.tdh').text();
// each pie slice will now be styled in a CSS file -keeping style where it should be other than in JavaScript
values.pieColour = row.find('th span').css('borderLeftColor');
// increase total value
totalSpend += parseInt(values.spend, 10);
// push values into the array for access later
pieData.push(values);
}
// iterate through each table row (only in the body)
$source.find('.tbh tr').each(prepare);
// call the plugin to create the chart
var sizeman = 300
var sizepiespace = sizeman /2
var sizepie = sizeman / (30/13)
if(pie){
pie.clear();
}
pie = Raphael($container[0], sizeman, sizeman).renderPie(sizepiespace, sizepiespace, sizepie, pieData, totalSpend);
// attaching an event to the Raphaël set that fades all the slice back to full opacity
pie.mouseout(function() {
pie.attr('opacity', 1);
});
};
// calling our makePie function on DOM ready
function piefunc(){
$(function() {
dotNet.makePie($('table'),$('#pie'), pie);
});
}
piefunc();
}
This is the checkbox that it applies to and where the pie is actually run.
<form>
<input type="checkbox" id="checker" onclick="checkFun();" />
</form>
<script type="text/javascript">
var box = document.getElementById('checker');
function checkFun(){
allPie();
}
allPie();
pieShower();
</script>
单击该复选框时，它确实会生成一个具有所需效果的新饼图，不幸的是，它还会将以前的版本向下推并将其保持在同一页面上，因此当您继续选中和取消选中该框时，页面上会越来越多. 在创建具有所需效果的新图表时，是否有“删除”或删除页面上已有图表的方法？