From 519cfbc1a92dc48b44c7d0e08756093439e3b124 Mon Sep 17 00:00:00 2001 From: leon Date: Wed, 19 Apr 2023 15:37:16 +0800 Subject: [PATCH] revert fix #7522 --- g.bar.horizontal.js | 219 ------------------------------------------ g.bar.overlay.js | 227 +++++++++++++++----------------------------- g.bar.split.js | 92 ++++++------------ g.pie.circular.js | 54 +++-------- g.pie.sector.js | 163 ++++++++----------------------- seed/toSVG.js | 10 +- test/bartest.html | 107 ++++----------------- 7 files changed, 181 insertions(+), 691 deletions(-) delete mode 100644 g.bar.horizontal.js diff --git a/g.bar.horizontal.js b/g.bar.horizontal.js deleted file mode 100644 index 6b82ca4..0000000 --- a/g.bar.horizontal.js +++ /dev/null @@ -1,219 +0,0 @@ -/*! - * g.Raphael 0.5 - Charting library, based on Raphaël - * - * Copyright (c) 2009 Dmitry Baranovskiy (http://g.raphaeljs.com) - * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license. - */ -imports = typeof(imports) == 'undefined' ? false : imports; -Raphael = typeof(Raphael) != 'undefined' ? Raphael : (imports ? imports.seed.Raphael.Raphael : {}); -Roo = typeof(Roo) != 'undefined' ? Roo: (imports ? imports.seed.Roo.Roo: {}); - -(function () { - - /** - * Create a horizontal chart - * support left axis with labels and bottom axis with interval - * - * @param {Raphael} paper to draw on - * @param {int} width - width of the chart - * @param {int} height - height of the chart - * @param {Array} values - * @param {Object} opts options - * background (string) : background color - * colors (array) : colors of the bars - * labelfont (string) : font family of bar labels - * labelfontsize (number) : font size of bar labels - * labelfontweight (string) (number) : font weight of bar labels - * labelfontcolors (array) : font colors of bar labels - * gutter (string) (number) : height of gutters in terms of percentage of bar height (e.g. '20%' : height raito of a bar to a gutter is 10 to 2) - * axis (string) : composed of 4 '0' / '1' separated by space (indicated whether top / right / bottom / left axis should be shown) - * (e.g. '0 0 1 1' indicates that the bottom and the left axis should be shown) - * leftaxiswidth (number) : width of left axis area - * leftaxislabels (array) : labels in left axis area - * leftaxisfontsize (number) : font size of labels in left axis - * bottomaxisheight (number) : height of bottom axis area - * bottomaxisstep (number) : number of steps in bottom axis - * bottomaxisfontsize (number) : font size of labels in bottom axis - * axisfont (string) : font family of labels in axes - * axisfontweight (string) (number) : font weight of labels in axes - * axisfontcolor (string) : font color of labels in axes - */ - - function MHBarchart(paper, width, height, values, opts) { - opts = opts || {}; - - var chartinst = this, - chart = paper.set(), - len = values.length, - max = values.length == 0 ? 0 : Math.max(...values), - background = opts.background || '#FFFFFF', - colors = opts.colors || chartinst.colors, - labelFont = opts.labelfont || 'Work Sans', - labelFontSize = opts.labelfontsize || 12, - labelFontWeight = opts.labelfontweight || 'bold', - labelFontColors = opts.labelfontcolors || [], - gutter = parseFloat(opts.gutter || "40%"), - axis = opts.axis || "0 0 0 0", - ax = (axis + "").split(/[,\s]+/), - leftAxisWidth = 0, - leftAxisLabels = opts.leftaxislabels || []; - leftAxisFontSize = opts.leftaxisfontsize || 16, - bottomAxisHeight = 0, - bottomAxisStep = opts.bottomaxisstep || 10; - bottomAxisFontSize = opts.bottomaxisfontsize || 16, - axisFont = opts.axisfont || 'Work Sans', - axisFontWeight = opts.axisfontweight || 'normal', - axisFontColor = opts.axisfontcolor || '#323232'; - - // bottom axis - if(+ax[2]) { - bottomAxisHeight = opts.bottomaxisheight || 30; - max = Math.ceil(max / bottomAxisStep) * bottomAxisStep; - } - // left axis - if(+ax[3]) { - leftAxisWidth = opts.leftaxiswidth || 240; - } - - if(labelFontColors.length < len) { - for(var i = labelFontColors.length; i < len; i++) { - labelFontColors.push('#FFFFFF'); - } - } - - // background - paper.rect(0, 0, width, height).attr({ stroke: "none", fill: background }); - - var barWidth = (width - leftAxisWidth); // maximum width of bar - var barHeight = (height - bottomAxisHeight) / (len * (100 + gutter) + gutter) * 100; - var barGutter = barHeight * (gutter / 100); - - // bottom axis - if(+ax[2]) { - chartinst.bottomAxis( - paper, - leftAxisWidth, - height - bottomAxisHeight, - width - leftAxisWidth, - max, - bottomAxisStep, - bottomAxisHeight, - axisFont, - bottomAxisFontSize, - axisFontWeight, - axisFontColor - ) - } - - // left axis - if(+ax[3]) { - chartinst.leftAxis( - paper, - leftAxisWidth, - 0, - height - bottomAxisHeight, - leftAxisLabels, - barHeight, - barGutter, - axisFont, - leftAxisFontSize, - axisFontWeight, - axisFontColor - ) - } - - // bars - var unit = barWidth / max; - - values.forEach(function(v,k) { - if(v == 0) { - return; - } - - paper.rect(leftAxisWidth, barGutter + (k * (barHeight + barGutter)), v * unit, barHeight).attr({ stroke: "none", fill: colors[k] }); - - // bar label - // 16 pixels away from right of left axis - // align bar label in the center - paper.text(leftAxisWidth + 16, barGutter + (k * (barHeight + barGutter)) + barHeight / 2, Roo.util.Format.number(v, 0)).attr({ - "font-size": labelFontSize, - "font-family": labelFont, - "font-weight": labelFontWeight, - "text-anchor": 'start', - fill : labelFontColors[k] - }); - - }); - - return chart; - - } - - //inheritance - var F = function() {}; - F.prototype = Raphael.g; - MHBarchart.prototype = new F; - - Raphael.fn.mhbarchart = function(width, height, values, opts) { - return new MHBarchart(this, width, height, values, opts); - }; - - MHBarchart.prototype.bottomAxis = function (paper, x, y, length, max, steps, axisHeight, axisFont, axisFontSize, axisFontWeight, axisFontColor) - { - var path = ["M", x, y, "l", length, 0], - text = paper.set(), - d = Math.ceil(max / steps), - dl = length / steps; - - for(var i = 0; i < steps; i++) { - paper.text(x + i * dl, y + axisHeight / 2, i * d).attr({ - "font-size": axisFontSize, - "font-family": axisFont, - "font-weight": axisFontWeight, - "text-anchor": 'middle', - fill : axisFontColor - }); - - // bottom axis interval - paper.path(["M", x + i * dl , y, "l", 0, -1 * y]).attr({ stroke: '#9E9E9E', "stroke-width": 1 }); - } - - var res = paper.path(path).attr({ stroke: '#000', "stroke-width": 0 }); // default no axis - - res.text = text; - res.all = paper.set([res, text]); - res.remove = function () { - this.text.remove(); - this.constructor.prototype.remove.call(this); - }; - - return res; - } - - MHBarchart.prototype.leftAxis = function (paper, x, y, length, labels, barHeight, barGutter, axisFont, axisFontSize, axisFontWeight, axisFontColor) - { - var path = ["M", x, y, "l", 0, length], - text = paper.set(); - - labels.forEach(function(v,k) { - paper.text(0, barGutter + (k * (barHeight + barGutter)) + barHeight / 2, v).attr({ - "font-size": axisFontSize, - "font-family": axisFont, - "font-weight": axisFontWeight, - "text-anchor": 'start', - fill : axisFontColor - }); - }); - - var res = paper.path(path).attr({ stroke: '#000', "stroke-width": 0 }); // default no axis - - res.text = text; - res.all = paper.set([res, text]); - res.remove = function () { - this.text.remove(); - this.constructor.prototype.remove.call(this); - }; - - return res; - } -})(); \ No newline at end of file diff --git a/g.bar.overlay.js b/g.bar.overlay.js index 221a81a..7ad21ee 100644 --- a/g.bar.overlay.js +++ b/g.bar.overlay.js @@ -31,6 +31,8 @@ if (typeof(Raphael) == 'undefined') { /*\ + * Paper.vbarchart + [ method ] ** * Creates a vertical bar chart ** @@ -43,37 +45,18 @@ if (typeof(Raphael) == 'undefined') { - values (array) values - opts (object) options for the chart o { - background (string) : background color - gutter (string) (number) : indicate width of gutters with repsect to the bars in terms of percentage (e.g. '20%' means that the width ratio of gutter to bar is 10:2) - barsteps (number) : number of bars shown - barfill (string) : color to fill the empty bar (not filling if not provided) - baroffset (number) : distance between the rightmost bar and y axis; - colors (array) : colors of the bars - axis (string) : composed of 4 '0' / '1' separated by space (indicated whether top / right / bottom / left axis should be shown) - (e.g. '0 1 1 0' indicates that the right and the bottom axis should be shown) - asixxheight (number) : height of x axis area - axisxlabels (string) : labels in x axis - asixywidth (number) : width of y axis area - axisystep (number) : number of steps in y axis - axislinecolor (string) : color of lines in y axis - axisfont (string) : font family of labels in axes - axisfontsize (number) : font size of labels in axes - axisfontweight (string) (number) : font weight of labels in axes - axisfontcolor (string) : font color of labels in axes - labelfont (string) : font family of labels - labelsize (number) : font size of labels - labelweight (string)(number) : font weight of labels - labelcolors (array) : font colors of the labels - legends (array) : legend - legendheight : height of the legend - legendkeyshape (string) : shape of the legend keys ('circle' / 'rect') - legendkeysize (number) : size of the legend keys (diameter for 'circle' and width for 'rect') - legendfont (string) : font family of the legend labels - legendfontsize (number) : font size of the legend labels - legendfontweight (string)(number) : font weight of the legend labels - legendfontcolor (string) : font color of the legend colors + o type (string) type of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'. + o gutter (number)(string) default '20%' (WHAT DOES IT DO?) + o vgutter (number) + o colors (array) colors be used repeatedly to plot the bars. If multicolumn bar is used each sequence of bars with use a different color. + o stacked (boolean) whether or not to tread values as in a stacked bar chart + o to + o stretch (boolean) o } ** + = (object) path element of the popup + > Usage + | r.vbarchart(0, 0, 620, 260, [[76, 70], [67, 71]], {}) \*/ @@ -85,36 +68,14 @@ if (typeof(Raphael) == 'undefined') { chart = paper.set(), bars = paper.set(), covers = paper.set(), - len = values.length, - gutter = parseFloat(opts.gutter || "0%"), barsteps = opts.barsteps || 20, - barFill = opts.barfill || false, // default no fill - colors = opts.colors || chartinst.colors, - axisLineColor = opts.axislinecolor || '#BABABA', - axisFont = opts.axisfont || "'Fontin Sans', Fontin-Sans, sans-serif", - axisFontSize = opts.axisfontsize || ((barsteps > 10) ? 12 : 14), - axisFontWeight = opts.axisfontweight || 'bold', - axisFontColor = opts.axisfontcolor || '#BABABA', - labelFont = opts.labelfont || "'Fontin Sans', Fontin-Sans, sans-serif", - labelSize = opts.labelsize || ((barsteps > 10) ? 10 : 12), - labelWeight = opts.labelweight || 'bold', - labelColors = opts.labelcolors || [], - legendKeyShape = opts.legendkeyshape || 'circle', - legendKeySize = opts.legendkeysize || 16, - legendFont = opts.legendfont || "'Fontin Sans', Fontin-Sans, sans-serif", - legendFontSize = opts.legendfontsize || 14, - legendFontWeight = opts.legendfontweight || 'bold', - legendFontColor = opts.legendfontcolor || '#0C014D'; - - for(var i = 0; i < len; i++) { - labelColors.push('#FFFFFF'); - } + colors = opts.colors || chartinst.colors; opts.axis = opts.axis || ""; opts.baroffset = opts.baroffset || 10; - axisXHeight = opts.asixxheight || 100; - axisYWidth = opts.asixywidth || 100; + opts.asixxheight = opts.asixxheight || 100; + opts.asixywidth = opts.asixywidth || 100; opts.axisxlabels = opts.axisxlabels || []; opts.legendheight = opts.legendheight || 80; opts.legends = opts.legends || 100; @@ -123,22 +84,16 @@ if (typeof(Raphael) == 'undefined') { paper.rect(0, 0, width, height).attr({ stroke: "none", fill: (opts.background || "#F0F4F7") }); // background.toBack(); - // bar border && bar gutter - // total 'barsteps' of bars and 'barsteps - 1' of gutters - var barWidth = (width - x - axisYWidth - opts.baroffset) / (barsteps * (100 + gutter) - gutter) * 100; - var barGutter = barWidth * gutter / 100; - var barHeight = height - y - axisXHeight - opts.legendheight || 100; - var path = []; + // bar border + var barwidth = Math.floor((width - x - opts.asixywidth - opts.baroffset) / barsteps); + var barheight = height - y - opts.asixxheight - opts.legendheight || 100; + var path = ["M", x + 1, y + opts.legendheight, "l", 0, barheight] for (var i = 0; i < barsteps; i++) { - path = path.concat(["M", x + (i * (barWidth + barGutter)), height - axisXHeight, "l", 0, -1 * barHeight, "l", barWidth, 0, "l", 0, barHeight]); - - if(barFill) { - paper.rect(x + (i * (barWidth + barGutter)) + 1 , y + opts.legendheight + 1, barWidth - 2, barHeight - 2).attr({ stroke: "none", fill: barFill }); - } + path = path.concat(["M", x + (i * barwidth), y + opts.legendheight + 1, "l", barwidth, 0, "l", 0, barheight]); } - paper.path(path).attr({ stroke: "#FFF", "stroke-width": 2}); + paper.path(path).attr({ stroke: "#fff", "stroke-width": 2 }); var max = 0; @@ -148,44 +103,29 @@ if (typeof(Raphael) == 'undefined') { } value.forEach(function(v,k) { - if(k >= barsteps) { - return; - } max = (v > max) ? v : max; }); }); - // legends values.forEach(function(value,i) { if (!Raphael.is(value, "array")) { value = [value]; } - - // 10 pixels away from top of the chart - // 10 pixels away from left of the chart - if(legendKeyShape == 'rect') { - // pass top left position for 'rect' - paper.rect(x + (i * (width - x) / len) + 10, y + 10, legendKeySize, legendKeySize, 0).attr({ fill: colors[i%colors.length], "stroke": "#fff" }); - } - else { - // pass center position for 'circle' - paper.circle(x + (i * (width - x) / len) + 10 + (legendKeySize / 2), y + 10 + (legendKeySize / 2), legendKeySize / 2).attr({ fill: colors[i%colors.length], "stroke": "#fff" }); - } - // 10 pixels away from right of the legend key - // align legend key and text horizontally - paper.text(x + (i * (width - x) / len) + 10 + legendKeySize + 10, y + 10 + (legendKeySize / 2) - legendFontSize / 10, opts.legends[i%opts.legends.length]).attr({ - "font-size": legendFontSize, - "font-family": legendFont, - "font-weight": legendFontWeight, + paper.circle(x + (i * 400) + 8, y + 10, 8).attr({ fill: colors[i%colors.length], "stroke": "#fff" }); + + paper.text(x + (i * 400) + 18, y + 8, opts.legends[i%opts.legends.length]).attr({ + "font-size": "14", + "font-family": "'Fontin Sans', Fontin-Sans, sans-serif", + "font-weight": "bold", "text-anchor": "start", - fill : legendFontColor + fill : "#0C014D" }); }); //bars - var unit = barHeight / max; + var unit = barheight / max; values.forEach(function(value,i) { if (!Raphael.is(values, "array")) { @@ -193,32 +133,27 @@ if (typeof(Raphael) == 'undefined') { } value.forEach(function(v,k) { - if(v == 0 || k >= barsteps) { + if(v == 0) { return; } - paper.rect(x + (k * (barWidth + barGutter)) + 1 , y + opts.legendheight + 1 + (max - v) * unit, barWidth - 2, v * unit - 2).attr({ stroke: "none", fill: colors[i%colors.length] }); - - // width and height of indicator - var iw = barWidth * 0.8; - var ih = Math.min(30, iw * 0.5); - - // position of indicator - var ix = x + (k * (barWidth + barGutter)) + 1 + (barWidth - iw) / 2; - var iy = y + opts.legendheight + 1 + (max - v) * unit - ih - 20; + paper.rect(x + 1 + (k * barwidth) , y + opts.legendheight + 1 + (max - v) * unit, barwidth - 2, v * unit).attr({ stroke: "none", fill: colors[i%colors.length] }); + + var indicator_y = y + opts.legendheight + (max - v) * unit - 42; if(i == 0) { - iy = y + opts.legendheight + 1 - ih - 20; + indicator_y = y + opts.legendheight - 42; } - paper.rect(ix , iy, iw, ih, 4).attr({ stroke: "none", fill: colors[i%colors.length] }); - paper.path(["M", ix + (iw - 10) / 2, iy + ih, "l", 5, 10, "l", 5, -10]).attr({ stroke: "none", fill: colors[i%colors.length] }); - // align labels center - paper.text(ix + iw / 2, iy + ih / 2 - labelSize / 10, Roo.util.Format.number(v, 0)).attr({ - "font-size": labelSize, - "font-family": labelFont, - "font-weight": labelWeight, - fill : labelColors[i] + var fontSize = barsteps > 10 ? 10 : 12; + + paper.rect(x + 1 + (k * barwidth) + 5 , indicator_y, barwidth - 10, 30, 5).attr({ stroke: "none", fill: colors[i%colors.length] }); + paper.path(["M", x + 1 + (k * barwidth) + barwidth / 4 + 10, indicator_y + 30, "l", 5, 10, "l", 5, -10]).attr({ stroke: "none", fill: colors[i%colors.length] }); + paper.text(x + 1 + (k * barwidth) + barwidth / 2, indicator_y + 14, Roo.util.Format.number(v, 0)).attr({ + "font-size": fontSize, + "font-family": "'Fontin Sans', Fontin-Sans, sans-serif", + "font-weight": "bold", + fill : "#fff" }); }); }); @@ -229,18 +164,14 @@ if (typeof(Raphael) == 'undefined') { // right axis +ax[1] && axis.push( chartinst.rightAxis( - width - axisYWidth, - height - axisXHeight, - height - y - axisXHeight - opts.legendheight, + width - opts.asixywidth, + height - opts.asixxheight, + height - y - opts.asixxheight - opts.legendheight, max, opts.axisystep || 10, - axisYWidth, - paper, - axisLineColor, - axisFont, - axisFontSize, - axisFontWeight, - axisFontColor + opts.asixywidth, + barsteps, + paper ) ); @@ -248,19 +179,13 @@ if (typeof(Raphael) == 'undefined') { +ax[2] && axis.push( chartinst.bottomAxis( x , - height - axisXHeight, - width - x - axisYWidth / 2, + height - opts.asixxheight, + width, + opts.axisxlabels.length, opts.axisxlabels, - barsteps, - barWidth, - barGutter, - axisXHeight, - paper, - axisLineColor, - axisFont, - axisFontSize, - axisFontWeight, - axisFontColor + barwidth, + opts.asixxheight, + paper ) ); @@ -279,12 +204,13 @@ if (typeof(Raphael) == 'undefined') { return new MVBarchart(this, x, y, width, height, values, opts); }; - MVBarchart.prototype.rightAxis = function (x, y, length, max, steps, axisYWidth, paper, axisLineColor, axisFont, axisFontSize, axisFontWeight, axisFontColor) + MVBarchart.prototype.rightAxis = function (x, y, length, max, steps, asixywidth, barsteps, paper) { // Roo.log('Right Axis'); -// Roo.log([x, y, length, max, steps, axisYWidth]); +// Roo.log([x, y, length, max, steps, asixywidth]); var path = [], + color = "#bababa", text = paper.set(), d = Math.ceil(max / steps); @@ -296,15 +222,14 @@ if (typeof(Raphael) == 'undefined') { for(var i = 0; i <= steps; i++) { if(i != 0) { - // 6 pixels away from bottom of the line - paper.text(x + (axisYWidth / 2), Y + axisFontSize / 2 + 6, label).attr({ - "font-size": axisFontSize, - "font-family": axisFont, - "font-weight": axisFontWeight, + paper.text(x + (asixywidth / 2), Y + 15, label).attr({ + "font-size": (barsteps > 10) ? "12" : "14", + "font-family": "'Fontin Sans', Fontin-Sans, sans-serif", + "font-weight": "bold", "text-anchor": "end", - fill : axisFontColor + fill : color }); - path = path.concat(["M", x , Y, "l", axisYWidth / 2, 0]); + path = path.concat(["M", x, Y, "l", (asixywidth / 2), 0]); } @@ -312,7 +237,7 @@ if (typeof(Raphael) == 'undefined') { Y -= dx; } - var res = paper.path(path).attr({ stroke: axisLineColor, "stroke-width": 2 }); + var res = paper.path(path).attr({ stroke: color, "stroke-width": 2 }); res.text = text; res.all = paper.set([res, text]); @@ -324,28 +249,26 @@ if (typeof(Raphael) == 'undefined') { return res; } - MVBarchart.prototype.bottomAxis = function (x, y, length, labels, barsteps, barWidth, barGutter, height, paper, axisLineColor, axisFont, axisFontSize, axisFontWeight, axisFontColor) + MVBarchart.prototype.bottomAxis = function (x, y, length, steps, labels, barwidth, eheight, paper) { // Roo.log('Bottom Axis'); -// Roo.log([x, y, length, steps, labels, barWidth]); +// Roo.log([x, y, length, steps, labels, barwidth]); var path = ["M", x, y, "l", length, 0], + color = "#bababa", text = paper.set(), - offset = Math.round(barWidth / 2); + offset = Math.round(barwidth / 2); labels.forEach(function(v,k) { - if(k >= barsteps) { - return; - } - paper.text(x + (k * (barWidth + barGutter)) + offset, y + (height / 2), v).attr({ - "font-size": axisFontSize, - "font-family": axisFont, - "font-weight": axisFontWeight, - fill : axisFontColor + paper.text(x + (k * barwidth) + offset, y + (eheight / 2), v).attr({ + "font-size": (steps > 10) ? "12" : "14", + "font-family": "'Fontin Sans', Fontin-Sans, sans-serif", + "font-weight": "bold", + fill : color }); }); - var res = paper.path(path).attr({ stroke: axisLineColor, "stroke-width": 2 }); + var res = paper.path(path).attr({ stroke: color, "stroke-width": 2 }); res.text = text; res.all = paper.set([res, text]); diff --git a/g.bar.split.js b/g.bar.split.js index 4084984..e665971 100644 --- a/g.bar.split.js +++ b/g.bar.split.js @@ -19,26 +19,9 @@ Roo = typeof(Roo) != 'undefined' ? Roo: (imports ? imports.seed.Roo.Roo: {}); * @param {int} r - radius * @param {Array} values * @param {Object} opts options - * top (number) : top padding - * bottom (number) : bottom padding - * left (number) : left padding - * right (number) : right padding - * background (string) : background color - * borderstlye (string) : border style of empty bars - * bordercolor (string): border color of empty bars - * barwidth (number) : width of the bars - * color (string) : color of the bars - * indicatorwidth (number): width of indicator - * indicatorheight (number): height of indicator - * indicatorcolor (string): color of indicator - * labelfont (string) : font family of labels - * labelsize (number) : font size of labels - * labelweight (string)(number) : font weight of labels - * labelcolor (string) : font color of the labels - * legendfont (string) : font family of the legend labels - * legendfontsize (number) : font size of the legend labels - * legendfontweight (string)(number) : font weight of the legend labels - * legendfontcolor (string) : font color of the legend colors + * cut : after this meany items - do not show a pie element? + * + * * */ @@ -47,60 +30,47 @@ Roo = typeof(Roo) != 'undefined' ? Roo: (imports ? imports.seed.Roo.Roo: {}); opts = opts || {}; var chartinst = this, - chart = paper.set(), - top = opts.top || 50, - bottom = opts.bottom || 50, - left = opts.left || 20, - right = opts.right || 20, - borderColor = opts.bordercolor || '#CCCCCC', - borderStyle = opts.borderstyle || '--', - barWidth = opts.barwidth || 100, - Color = opts.color || '#0A2BC4', - indicatorWidth = opts.indicatorwidth || barWidth / 2, - indicatorHeight = opts.indicatorheight || 30, - indicatorColor = opts.indicatorcolor || '#0C014D', - labelFont = opts.labelfont || "'Fontin Sans', Fontin-Sans, sans-serif", - labelSize = opts.labelsize || 16, - labelWeight = opts.labelweight || 'bold', - labelColor = opts.labelcolor || '#FFFFFF', - legendFont = opts.legendfont || "'Fontin Sans', Fontin-Sans, sans-serif", - legendFontSize = opts.legendfontsize || 22, - legendFontWeight = opts.legendfontweight || 'bold', - legendFontColor = opts.legendfontcolor || '#0C024B'; + chart = paper.set(); + + opts.top = opts.top || 50; + opts.bottom = opts.bottom || 50; + opts.left = opts.left || 20; + opts.right = opts.right || 20; + opts.barwidth = opts.barwidth || 100 + opts.color = opts.color || '#0A2BC4'; paper.rect(0, 0, width, height).attr({ stroke: "none", fill: (opts.background || "#F0F4F7") }); - var cw = width - left - right, - ch = height - top - bottom; + var cw = width - opts.left - opts.right, + ch = height - opts.top - opts.bottom; - paper.rect(left, top, barWidth, ch).attr({ stroke: borderColor, "stroke-dasharray": borderStyle }); - paper.rect(left + cw / 2, top, barWidth, ch).attr({ stroke: borderColor, "stroke-dasharray": borderStyle }); + paper.rect(opts.left, opts.top, opts.barwidth, ch).attr({ stroke: "#CCCCCC", "stroke-dasharray": "--" }); + paper.rect(opts.left + cw / 2, opts.top, opts.barwidth, ch).attr({ stroke: "#CCCCCC", "stroke-dasharray": "--" }); values.forEach(function(v,k) { v = Math.min(100, v); var bh = v * ch / 100, - bx = (k == 0) ? left : left + cw / 2, - by = top + ch - bh; + bx = (k == 0) ? opts.left : opts.left + cw / 2, + by = opts.top + ch - bh; - paper.rect(bx, by, barWidth, bh).attr({ stroke: "none", fill: Color }); - - paper.rect(bx + (barWidth - indicatorWidth) / 2 , by - 20 - indicatorHeight, indicatorWidth, indicatorHeight, 5).attr({ stroke: "none", fill: indicatorColor }); - paper.path(["M", bx + (barWidth - indicatorWidth) / 2 + (indicatorWidth - 10) / 2, by - 20, "l", 5, 10, "l", 5, -10]).attr({ stroke: "none", fill: indicatorColor }); + paper.rect(bx, by, opts.barwidth, bh).attr({ stroke: "none", fill: opts.color }); + + paper.rect(bx + opts.barwidth / 4 , by - 42, opts.barwidth / 2, 30, 5).attr({ stroke: "none", fill: "#0C014D" }); + paper.path(["M", bx + opts.barwidth / 4 + 10, by - 12, "l", 5, 10, "l", 5, -10]).attr({ stroke: "none", fill: "#0C014D" }); - paper.text(bx + barWidth / 2, by - 20 - indicatorHeight / 2, v + '%').attr({ - "font-size": labelSize, - "font-family": labelFont, - "font-weight": labelWeight, - "text-anchor": "middle", - fill : labelColor + paper.text(bx + opts.barwidth / 4 + 25, by - 28, v + '%').attr({ + "font-size": "16", + "font-family": "'Fontin Sans', Fontin-Sans, sans-serif", + "font-weight": "bold", + fill : "#fff" }); - paper.text(bx + barWidth + 25, top + 50, opts.legend[k]).attr({ - "font-size": legendFontSize, - "font-family": legendFont, - "font-weight": legendFontWeight, + paper.text(bx + opts.barwidth + 25, opts.top + 50, opts.legend[k]).attr({ + "font-size": "22", + "font-family": "'Fontin Sans', Fontin-Sans, sans-serif", + "font-weight": "bold", "text-anchor": "start", - fill : legendFontColor + fill : "#0C024B" }); }); diff --git a/g.pie.circular.js b/g.pie.circular.js index 9190dc8..a3ac8d3 100644 --- a/g.pie.circular.js +++ b/g.pie.circular.js @@ -19,19 +19,9 @@ Roo = typeof(Roo) != 'undefined' ? Roo: (imports ? imports.seed.Roo.Roo: {}); * @param {int} r - radius * @param {Array} values * @param {Object} opts options - * background (string) : background color - * colors (array) : colors of the pies - * borderwidth (number) : width of circle border - * labelfont (string) : font family of labels - * labelsize (number) : font size of labels - * labelweight (string) (number) : font weight of labels - * labelcolor (string) : font color of the labels - * linewidth (number) : width of the lines connecting the legend and the circles - * lineheight (number) : height of the lines connecting the legend and the circles - * legend (array) : legend - * legendfont (string) : font family of the legend labels - * legendfontsize (number) : font size of the legend labels - * legendfontcolor (string) : font color of the legend colors + * cut : after this meany items - do not show a pie element? + * + * * */ @@ -42,17 +32,8 @@ Roo = typeof(Roo) != 'undefined' ? Roo: (imports ? imports.seed.Roo.Roo: {}); var chartinst = this, chart = paper.set(), len = values.length; - borderWidth = typeof(opts.borderwidth) != 'undefined' ? opts.borderwidth : 2, // width can be 0 (no border) - labelFont = opts.labelfont || "'Fontin Sans', Fontin-Sans, sans-serif", - labelSize = opts.labelsize || 18, - labelWeight = opts.labelweight || 'bold', - labelColor = opts.labelcolor || '#FFFFFF', - lineWidth = opts.linewidth || 200, - lineHeight = opts.lineheight || 2, - lineColor = opts.linecolor || '#FFFFFF', - legendFont = opts.legendfont || "'Fontin Sans', Fontin-Sans, sans-serif", - legendFontSize = opts.legendfontsize || 18, - legendFontColor = opts.legendfontcolor || '#0C024B'; + + opts.linewidth = opts.linewidth || 200; paper.rect(0, 0, width, height).attr({ stroke: "none", fill: (opts.background || "#F0F4F7") }); @@ -68,17 +49,14 @@ Roo = typeof(Roo) != 'undefined' ? Roo: (imports ? imports.seed.Roo.Roo: {}); return b.value - a.value; }); - // dx, dy: position of the center of the circle - // dr: radius of the circle var dx = cx, dy = cy, dr = r; for (i = 0; i < len; i++) { - paper.circle(dx, dy, dr).attr({ fill: opts.colors && opts.colors[i] || chartinst.colors[i] || "#3E66BC", stroke: "#fff", "stroke-width": borderWidth }); + paper.circle(dx, dy, dr).attr({ fill: opts.colors && opts.colors[i] || chartinst.colors[i] || "#3E66BC", stroke: "#fff", "stroke-width": 2 }); - // nx, ny: position of the label var nx = dx, ny = dy - dr + 20; @@ -87,20 +65,18 @@ Roo = typeof(Roo) != 'undefined' ? Roo: (imports ? imports.seed.Roo.Roo: {}); } paper.text(nx, ny, Roo.util.Format.number(values[i], 0)).attr({ - "font-size": labelSize, - "font-family": labelFont, - "font-weight": labelWeight, - "text-anchor": "middle", - fill : labelColor + "font-size": "18", + "font-family": "'Fontin Sans', Fontin-Sans, sans-serif", + "font-weight": "bold", + fill : "#fff" }); - paper.path(["M", dx, dy - dr, "l", lineWidth, 0]).attr({ stroke: lineColor, "stroke-width": lineHeight }); - - paper.text(dx + lineWidth + 10, dy - dr, opts.legend[values[i].origin]).attr({ - "font-size": legendFontSize, - "font-family": legendFont, + paper.path(["M", dx, dy - dr, "l", opts.linewidth, 0]).attr({ stroke: "#fff", "stroke-width": 2 }); + paper.text(dx + opts.linewidth + 10, dy - dr, opts.legend[values[i].origin]).attr({ + "font-size": "18", + "font-family": "'Fontin Sans', Fontin-Sans, sans-serif", "text-anchor": "start", - fill : legendFontColor + fill : "#0C024B" }); dy = dy + dr / 4 *3; diff --git a/g.pie.sector.js b/g.pie.sector.js index c83a73b..9f7deb7 100644 --- a/g.pie.sector.js +++ b/g.pie.sector.js @@ -19,26 +19,10 @@ Roo = typeof(Roo) != 'undefined' ? Roo: (imports ? imports.seed.Roo.Roo: {}); * @param {int} r - radius * @param {Array} values * @param {Object} opts options - * background (string) : background color - * start_angle (number) : the angle of the starting position of the first pie - * barwidth (number) : width of a pie - * colors (array) : colors of the pies - * cut (number) : after showing this number of elements using this number of pies, merge and show the rest of the elements using one pie (maximum 'cut' + 1 pies in total) - * others (string) : legend label labelling the pie for the merged elements (*required if there are merged elements) - * no_sort (boolean) : sort the values in descending order if it is not set - * labels (array) : labels on the pie - * labelfont (string) : font family of the labels - * labelsize (number) : font size of the labels - * labelweight (string)(number) : font weight of the labels - * labelcolor (string) : font color of the labels - * legend (array) : legend - * legendpos (string) : position of the legend ('right' / 'bottom') - * legendkeyshape (string) : shape of the legend keys ('circle' / 'rect') - * legendkeysize (number) : size of the legend keys (diameter for 'circle' and width for 'rect') - * legendfont (string) : font family of the legend labels - * legendfontsize (number) : font size of the legend labels - * legendfontcolor (string) : font color of the legend colors - * lineheight (number) : distance between two legend labels + * cut : after this meany items - do not show a pie element? + * + * + * */ function Piesectorchart(paper, width, height, cx, cy, r, values, opts) { @@ -48,15 +32,12 @@ Roo = typeof(Roo) != 'undefined' ? Roo: (imports ? imports.seed.Roo.Roo: {}); var chartinst = this, chart = paper.set(), len = values.length, + angle = opts.start_angle || 90, total = 0, - angle = opts.start_angle || 90, + others = 0, cut = opts.cut || 9, - defcut = true, - labels = opts.labels || false; // default no labels - labelFont = opts.labelfont || "'Fontin Sans', Fontin-Sans, sans-serif", - labelSize = opts.labelsize || 18, - labelWeight = opts.labelweight || 'normal', - labelColor = opts.labelcolor || '#FFFFFF'; + defcut = true + lineheight = opts.lineheight || 30; opts.barwidth = opts.barwidth || 80; @@ -75,22 +56,22 @@ Roo = typeof(Roo) != 'undefined' ? Roo: (imports ? imports.seed.Roo.Roo: {}); return {path: path, stroke: color}; }; - - for (var i = 0; i < len; i++) { - total += values[i] * 1; - values[i] = { - value: values[i], - origin: i, - valueOf: function () { return this.value; } - }; - } if (len == 1) { + total = values[0]; paper.circle(cx, cy, r + opts.barwidth / 2).attr({ fill: opts.colors && opts.colors[0] || chartinst.colors[0] || "#3E66BC", "stroke": "#fff" }); paper.circle(cx, cy, r - opts.barwidth / 2).attr({ fill: opts.background || "#F0F4F7", "stroke": "#fff" }); } else { + for (var i = 0; i < len; i++) { + total += values[i] * 1; + values[i] = { + value: values[i], + valueOf: function () { return this.value; } + }; + } + if (!opts.no_sort) { values.sort(function (a, b) { return b.value - a.value; @@ -98,7 +79,6 @@ Roo = typeof(Roo) != 'undefined' ? Roo: (imports ? imports.seed.Roo.Roo: {}); } for (i = 0; i < len; i++) { - // minimum degree of a pie shown if (defcut && values[i] * 360 / total <= 1.5) { cut = i; defcut = false; @@ -112,117 +92,52 @@ Roo = typeof(Roo) != 'undefined' ? Roo: (imports ? imports.seed.Roo.Roo: {}); } len = Math.min(cut + 1, values.length); - - var a = angle; for (i = 0; i < len; i++) { - paper.path().attr({ + + var p = paper.path().attr({ "stroke": "#fff", "stroke-width": opts.barwidth - }).attr({sector: [cx, cy, a, a -= 360 * values[i] / total, opts.colors && opts.colors[i] || chartinst.colors[i], r]}); - } + }).attr({sector: [cx, cy, angle, angle -= 360 * values[i] / total, opts.colors && opts.colors[i] || chartinst.colors[i], r]}); - } - - // labels - var rad = Math.PI / 180; - - var a = angle; - - for (i = 0; i < len; i++) { - - a -= 360 * values[i] / total; - - // show the label only if the values >= 5% of total - if(labels && values[i] / total >= 0.05) { - var text = labels[i]; - - if(text.indexOf('#qty#') !== -1) { - text = text.replace('#qty#', Math.round(values[i])); - } - - if(text.indexOf('#%#') !== -1) { - text = text.replace('#%#', Math.round(values[i] / total * 100) + '%'); - } - - var tx = cx + r * Math.cos(-(a + 180 * values[i] / total) * rad), - ty = cy + r * Math.sin(-(a + 180 * values[i] / total) * rad); - - paper.text(tx, ty, text).attr({ - "font-size": labelSize, - "font-family": labelFont, - "font-weight" : labelWeight, - "text-anchor": "middle", - fill : labelColor - }); } + } - - legend(paper, cx, cy, r, values, opts, total, len); - - chart.cx = cx; - chart.cy = cy; - chart.r = r; - return chart; - } - - // draw legend - function legend(paper, cx, cy, r, values, opts, total, len) - { - var legendPos = opts.legendpos || 'right', - legendKeyShape = opts.legendkeyshape || 'circle', - legendKeySize = opts.legendkeysize || 12, - legendFont = opts.legendfont || "'Fontin Sans', Fontin-Sans, sans-serif", - legendFontSize = opts.legendfontsize || 18, - legendFontColor = opts.legendfontcolor || '#0C014F', - lineHeight = opts.lineheight || 30; - - // default 'legendPos' is 'right' - // ix, iy: center position of legend key - var ix = cx + r + opts.barwidth / 2 + 30, // 30 pixels away from right of the chart + var ix = cx + r + opts.barwidth / 2 + 30, iy = cy - r - 30; - - if(legendPos == 'bottom') { - ix = cx - r - opts.barwidth / 2 - 30; // 30 pixels away from left of the chart - iy = cy + r + opts.barwidth / 2 + 30; // 30 pixels away from bottom of the chart - } - - + for (var i = 0; i < len; i++) { - if(legendKeyShape == 'rect') { - // pass top left position for 'rect' - paper.rect(ix - (legendKeySize / 2), iy - (legendKeySize / 2), legendKeySize, legendKeySize, 0).attr({ fill: opts.colors && opts.colors[i] || chartinst.colors[i] || "#3E66BC", "stroke": "#fff" }); - } - else { - // pass center position for 'circle' - paper.circle(ix, iy, legendKeySize / 2).attr({ fill: opts.colors && opts.colors[i] || chartinst.colors[i] || "#3E66BC", "stroke": "#fff" }); - } - - var text = (values[i].others) ? opts.others : opts.legend[values[i].origin] || values[i]; + paper.circle(ix, iy, 6).attr({ fill: opts.colors && opts.colors[i] || chartinst.colors[i] || "#3E66BC", "stroke": "#fff" }); + + var text = (values[i].others) ? opts.others : opts.legend[i] || values[i]; if(text.indexOf('#qty#') !== -1) { text = text.replace('#qty#', Math.round(values[i])); } - + if(text.indexOf('#%#') !== -1) { text = text.replace('#%#', Math.round(values[i] / total * 100) + '%'); } - // 12 pixels away from the right of legend key - // align legend key and text horizontally - paper.text(ix + legendKeySize / 2 + 12, iy - legendFontSize / 10, text).attr({ - "font-size": legendFontSize, - "font-family": legendFont, + paper.text(ix + 20, iy, text).attr({ + "font-size": "18", + "font-family": "'Fontin Sans', Fontin-Sans, sans-serif", "text-anchor": "start", - fill : legendFontColor + fill : "#0C014F" }); - iy += lineHeight; + iy += lineheight; + } - } + chart.cx = cx; + chart.cy = cy; + chart.r = r; + return chart; + }; + //inheritance var F = function() {}; F.prototype = Raphael.g; diff --git a/seed/toSVG.js b/seed/toSVG.js index dce97c3..b95cbd7 100644 --- a/seed/toSVG.js +++ b/seed/toSVG.js @@ -108,8 +108,7 @@ function extractStyle(node) { font: { family: typeof node.attrs['font-family'] === 'undefined' ? null : node.attrs['font-family'], size: typeof node.attrs['font-size'] === 'undefined' ? null : (node.attrs['font-size']), - weight: typeof node.attrs['font-weight'] === 'undefined' ? null : (node.attrs['font-weight']), - anchor: typeof node.attrs['text-anchor'] === 'undefined' ? null : node.attrs['text-anchor'] + anchor: typeof node.attrs['text-anchor'] === 'undefined' ? null : node.attrs['text-anchor'], } }; } @@ -123,6 +122,7 @@ function styleToString(style) { //Roo.log(JSON.stringify(style)); var r = [ 'font-family:' + style.font.family, + 'font-weight:normal', 'font-style:normal', 'font-stretch:normal', 'font-variant:normal' @@ -130,12 +130,6 @@ function styleToString(style) { if (style.font.size !== null) { r.push('font-size: ' + style.font.size + 'px') } - if (style.font.weight !== null) { - r.push('font-weight: ' + style.font.weight); - } - else { - r.push('font-weight: normal'); - } return r.join(';') diff --git a/test/bartest.html b/test/bartest.html index cdec7bc..a90bb64 100644 --- a/test/bartest.html +++ b/test/bartest.html @@ -3,109 +3,40 @@ gRaphaël Dynamic Bar Chart + - - - - - - + -
+

Demo of gRaphaël JavaScript library.

-- 2.39.2