piechart.js

睡衣网部分源代码 一次偶然机会 被我下载了下来

    this.chartx = w + 5;
    this.charty = item.offsetHeight / 2;
    this.charth = this.h - ((item.offsetHeight * 1.5) + 5);
    this.chartw	= this.w - (((this.legend)?this.legend.offsetWidth:0) + w + 10);
    this.calc(this.chartw, this.charth, this.xlen, this.ymin, this.ymax, this.xgd, this.ygd);
	
    /* Position labels on the axis */
    n          = this.range / this.charth;
    yoffset    = (this.ymin / n);
    for (i = 0; i < items.length; i++) {
		item = items[i][1];
		pos = items[i][0];
		if (pos == this.ymin) { y = this.charty + this.charth - 1; }
		else { y = this.charty + (this.charth - (pos / n) + yoffset); }
		this._painter.fillRect('black',this.chartx - 5, y, 5, 1);
		ty = y - (item.offsetHeight/2);
		item.style.position = 'absolute';
		item.style.right = '0px';
		item.style.top   = ty + 'px';
    }	
};


Chart.prototype.drawHorizontalAxis = function(xlen, labels, xgd, precision) {
    var axis, item, step, x, tx, n, multiplier;

    /* Calculate offset, step size and rounding precision */
    multiplier = Math.pow(10, precision);
    n          = this.chartw / (xgd - 1);

    /* Create container */
    axis = document.createElement('div');
    axis.style.position = 'absolute';
    axis.style.left   = '0px';
    axis.style.top    = (this.charty + this.charth + 5) + 'px';
    axis.style.width  = this.w + 'px';
    this._cont.appendChild(axis);

    /* Draw labels and points */
    for (i = 0; i < xgd; i++) {
		item = document.createElement('span');
		if (labels[i]) {
			item.appendChild(document.createTextNode(labels[i]));
		}
		axis.appendChild(item);
		x = this.chartx + (n * i);
		tx = x - (item.offsetWidth/2);
		item.style.position = 'absolute';
		item.style.left = tx + 'px';
		item.style.top  = '0px';
		this._painter.fillRect('black',x, this.charty + this.charth, 1, 5);
    }	
};


Chart.prototype.drawAxis = function() {
    var x1, x2, y1, y2;
    x1 = this.chartx;
    x2 = this.chartx + this.chartw + 1;
    y1 = this.charty;
    y2 = this.charty + this.charth - 1;
    this._painter.line('black',1,x1, y1, x1, y2);
    this._painter.line('black',1,x1, y2, x2, y2);
};


Chart.prototype.drawBackground = function() {
    this._painter.fillRect('white',0, 0, this.w, this.h);
};


Chart.prototype.drawGrid = function() {
    if (this.xgrid) {
		for (i = this.xgrid; i < this.chartw; i += this.xgrid) {
			this._painter.line('silver',1,this.chartx + i, this.charty, this.chartx + i, this.charty + this.charth - 1);
		}
    }
    if (this.ygrid) {
		for (i = this.charth - this.ygrid; i > 0; i -= this.ygrid) {
			this._painter.line('silver',1,this.chartx + 1, this.charty + i, this.chartx + this.chartw + 1, this.charty + i);
		}
    }
};


/*----------------------------------------------------------------------------\
  |                         AbstractChartSeries                                 |
  |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -|
  | Abstract class for common methods across all types of Charts                |
  \----------------------------------------------------------------------------*/

function AbstractChartSeries() {
}

AbstractChartSeries.prototype.getColor = function() {
	return this.data['color'];
};
	
AbstractChartSeries.prototype.getLabel = function() {
	return this.data['label'];
};


AbstractChartSeries.prototype.setRange = function(chart) {
	if (this.data['values'].length > chart.xlen) { chart.xlen = this.data['values'].length; }
	for (var j = 0; j < this.data['values'].length; j++) {
		if ((this.data['values'][j] < chart.ymin) || (chart.ymin == null))  { chart.ymin = this.data['values'][j]; }
		if (this.data['values'][j] > chart.ymax) { chart.ymax = this.data['values'][j]; }
	}
};

AbstractChartSeries.prototype.getStackedValues = function(chart) {
	var stacked=new Array();
	if (this.data['stackedOn']) {
		var stackedSeries=chart.findSeries(this.data['stackedOn']);
		if (stackedSeries) {
			stacked=stackedSeries.getStackedValues(chart);
		}
	}
	for(var i=0;i<this.data['values'].length;i++) {
		if (stacked[i]) {
			stacked[i]+=this.data['values'][i];
		} else {
			stacked[i]=this.data['values'][i];
		}
	}
	return stacked;
};

AbstractChartSeries.prototype.setConfig = function(name,value) {
	if (!value && typeof name == Object) {
		this.data=name;
	} else {
		this.data[name] = value;
	}
};

AbstractChartSeries.prototype.getConfig = function() {
	if (name) {
		return this.data[name];
	} else {
		return this.data;
	}
};

  /*----------------------------------------------------------------------------\
  |                              BarChartSeries                                 |
  |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -|
  | Bar Chart Series                                                            |
  \----------------------------------------------------------------------------*/

function BarChartSeries(data) {
	// data hash contains keys
	var defaultData = {
		label:"BarChart",// label - name of series
		color:"#000",    // color - HTML color for series
		values:[],       // values - array of values
		distance:0,      // distance - Sets distance between bars for bar charts.
		width:10,        // width - Sets with of bars for bar charts
		offset:0,        // offset - index of the bar in the chart
	};
	for (var p in data) {defaultData[p]=data[p];}
	this.data=defaultData;
	this.base=AbstractChartSeries;
	this.offset = this.data['distance'] + this.data['offset'] * (this.data['width'] + this.data['distance']);
}

BarChartSeries.prototype=new AbstractChartSeries;

BarChartSeries.prototype.draw = function(chart) {
	// draws a bar chart
    var i, len, x, y, barHt, yBottom, n, yoffset,painter,values;
	painter=chart.getPainter();
	values=this.getStackedValues(chart);
    if (values.length<=0) return;
    /* Determine distance between points and offset */
    n = chart.range / chart.charth;
    yoffset = (chart.ymin / n);
	yBottom = chart.charty + chart.charth + yoffset;
	
    len = values.length;
    if (len > chart.xlen) { len = chart.xlen; }
    if (len) {
		/* Determine position of each bar and draw it */
		x = chart.chartx + this.offset + 1;
		for (i = 0; i < len; i++) {
			y = (values[i] / n);
			barHt = (this.data['values'][i] / n);
			painter.fillRect(this.data['color'],x,yBottom-y,this.data['width'],barHt);
			x += chart.xstep;
		}
    }
};

  /*----------------------------------------------------------------------------\
  |                              AreaChartSeries                                 |
  |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -|
  | Area Chart Series                                                            |
  \----------------------------------------------------------------------------*/

function AreaChartSeries(data) {
	// data hash contains keys
	var defaultData = {
		label:"AreaChart",// label - name of series
		color:"#000",    // color - HTML color for series
		values:[],       // values - array of values
	};
	for (var p in data) {defaultData[p]=data[p];}
	this.data=defaultData;
	this.base=AbstractChartSeries;
}

AreaChartSeries.prototype=new AbstractChartSeries;

AreaChartSeries.prototype.draw = function(chart) {
	// draws a bar chart
    var i, len, x, y, barHt, yBottom, n, yoffset,painter,values;
	var points=[];
	painter=chart.getPainter();
	values=this.getStackedValues(chart);
    if (values.length<=0) return;
    /* Determine distance between points and offset */
    n = chart.range / chart.charth;
    yoffset = (chart.ymin / n);
	yBottom = chart.charty + chart.charth + yoffset;

    /* Begin line in lower left corner */
    points.push({x:chart.chartx + 1,y:chart.charty + chart.charth - 1});
	
    len = values.length;
    if (len > chart.xlen) { len = chart.xlen; }
    if (len) {
		/* Determine position of each bar and draw it */
		for (i = 0; i < len; i++) {
			y = (values[i] / n);
			barHt = (this.data['values'][i] / n);
			points.push({x:chart.chartx + 1 + chart.xstep*i,y:yBottom-y});
		}
		/* Add end point at lower right corner */
		points.push({x:chart.chartx + 1 + chart.xstep*(len-1),y:chart.charty + chart.charth - 1});
		for (i = len-1; i >=0; i--) {
			y = (values[i] / n);
			barHt = (this.data['values'][i] / n);
			points.push({x:chart.chartx + 1 + chart.xstep*i,y:yBottom-y+barHt});
		}
		painter.fillArea(this.data['color'],points);
    }
};


  /*----------------------------------------------------------------------------\
  |                              LineChartSeries                                |
  |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -|
  | Line Chart Series                                                           |
  \----------------------------------------------------------------------------*/

function LineChartSeries(data) {
	// data hash contains keys
	var defaultData = {
		label:"LineChart",// label - name of series
		color:"#000",    // color - HTML color for series
		values:[],       // values - array of values
	};
	for (var p in data) {defaultData[p]=data[p];}
	this.data=defaultData;
	this.base=AbstractChartSeries;
}

LineChartSeries.prototype=new AbstractChartSeries;

LineChartSeries.prototype.draw = function(chart) {
    var i, len, x, y, n, yoffset;
	painter=chart.getPainter();
	values=this.getStackedValues(chart);
    if (values.length<=0) return;
    var points=[];
    /* Determine distance between points and offset */
    n = chart.range / chart.charth;
    yoffset = (chart.ymin / n);

    /* Add points */
    for (i=0;i <values.length;i++) {
		points.push({x:chart.chartx+1+i*chart.xstep,y:chart.charty + chart.charth - (values[i] / n) + yoffset});
    }
    painter.polyLine(this.data['color'],1,points);
};



	
/*----------------------------------------------------------------------------\
  |                            AbstractChartPainter                             |
  |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -|
  | Abstract base class defining the painter API. Can not be used directly.     |
  \----------------------------------------------------------------------------*/

function AbstractChartPainter() {

};


AbstractChartPainter.prototype.create = function(el) {};
AbstractChartPainter.prototype.getWidth = function() {
    return this.w;
};

AbstractChartPainter.prototype.getHeight = function() {
    return this.h;
};

AbstractChartPainter.prototype.fillArea = function(color, points) {};
AbstractChartPainter.prototype.polyLine = function(color,lineWidth,points) {};
AbstractChartPainter.prototype.fillRect = function(color, x,y,width,height) {};
AbstractChartPainter.prototype.line = function(color,lineWidth,x1,y1,x2,y2) {};