diff --git a/.gitignore b/.gitignore index b0f8c0b..e68b9ec 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ build.sh node_modules/ +/.history/ +/.vscode/ diff --git a/dist/wxcharts-min.js b/dist/wxcharts-min.js index cc6ca55..3567d44 100644 --- a/dist/wxcharts-min.js +++ b/dist/wxcharts-min.js @@ -1,10 +1 @@ -/* - * charts for WeChat small app v1.0 - * - * https://github.com/xiaolin3303/wx-charts - * 2016-11-28 - * - * Designed and built with all the love of Web - */ - -"use strict";function assign(t,e){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var i=Object(t),a=1;at.length-3){var l=t.length-1;r=t[l].x-(t[l].x-t[l-1].x)*a,s=t[l].y-(t[l].y-t[l-1].y)*a}else r=t[e+1].x-(t[e+2].x-t[e].x)*a,s=t[e+1].y-(t[e+2].y-t[e].y)*a;return{ctrA:{x:n,y:o},ctrB:{x:r,y:s}}}function convertCoordinateOrigin(t,e,i){return{x:i.x+t,y:i.y-e}}function avoidCollision(t,e){if(e)for(;util.isCollision(t,e);)t.start.x>0?t.start.y--:t.start.x<0?t.start.y++:t.start.y>0?t.start.y++:t.start.y--;return t}function fillSeriesColor(t,e){var i=0;return t.map(function(t){return t.color||(t.color=e.colors[i],i=(i+1)%e.colors.length),t})}function getDataRange(t,e){var i=0,a=e-t;return i=a>=1e4?1e3:a>=1e3?100:a>=100?10:a>=10?5:a>=1?1:a>=.1?.1:.01,{minRange:findRange(t,"lower",i),maxRange:findRange(e,"upper",i)}}function measureText(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:10;t=String(t);var t=t.split(""),i=0;return t.forEach(function(t){i+=/[a-zA-Z]/.test(t)?7:/[0-9]/.test(t)?5.5:/\./.test(t)?2.7:/-/.test(t)?3.25:/[\u4e00-\u9fa5]/.test(t)?10:/\(|\)/.test(t)?3.73:/\s/.test(t)?2.5:/%/.test(t)?8:10}),i*e/10}function dataCombine(t){return t.reduce(function(t,e){return(t.data?t.data:t).concat(e.data)},[])}function getSeriesDataItem(t,e){var i=[];return t.forEach(function(t){if(null!==t.data[e]&&"undefinded"!=typeof t.data[e]){var a={};a.color=t.color,a.name=t.name,a.data=t.format?t.format(t.data[e]):t.data[e],i.push(a)}}),i}function getMaxTextListLength(t){var e=t.map(function(t){return measureText(t)});return Math.max.apply(null,e)}function getRadarCoordinateSeries(t){for(var e=2*Math.PI/t,i=[],a=0;ae&&(n=i)}),n}function isInExactChartArea(t,e,i){return t.xi.padding+i.yAxisWidth+i.yAxisTitleWidth&&t.y>i.padding&&t.y2*Math.PI&&(t-=2*Math.PI),t},o=Math.atan2(e.center.y-t.y,t.x-e.center.x);o*=-1,o<0&&(o+=2*Math.PI);var r=e.angleList.map(function(t){return t=i(-1*t)});r.forEach(function(t,e){var r=i(t-a/2),s=i(t+a/2);s=r&&o<=s||o+2*Math.PI>=r&&o+2*Math.PI<=s)&&(n=e)})}(),n}function findPieChartCurrentIndex(t,e){var i=-1;return isInExactPieChartArea(t,e.center,e.radius)&&!function(){var a=Math.atan2(e.center.y-t.y,t.x-e.center.x);a<0&&(a+=2*Math.PI),a=2*Math.PI-a,e.series.forEach(function(t,e){a>t._start_&&(i=e)})}(),i}function isInExactPieChartArea(t,e,i){return Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)<=Math.pow(i,2)}function splitPoints(t){var e=[],i=[];return t.forEach(function(t,a){null!==t?i.push(t):(i.length&&e.push(i),i=[])}),i.length&&e.push(i),e}function calLegendData(t,e,i){if(e.legend===!1)return{legendList:[],legendHeight:0};var a=5,n=8,o=15,r=[],s=0,l=[];return t.forEach(function(t){var i=3*a+o+measureText(t.name||"undefinded");s+i>e.width?(r.push(l),s=i,l=[t]):(s+=i,l.push(t))}),l.length&&r.push(l),{legendList:r,legendHeight:r.length*(i.fontSize+n)+a}}function calCategoriesData(t,e,i){var a={angle:0,xAxisHeight:i.xAxisHeight},n=getXAxisPoints(t,e,i),o=n.eachSpacing,r=t.map(function(t){return measureText(t)}),s=Math.max.apply(this,r);return s+2*i.xAxisTextPadding>o&&(a.angle=45*Math.PI/180,a.xAxisHeight=2*i.xAxisTextPadding+s*Math.sin(a.angle)),a}function getRadarDataPoints(t,e,i,a,n){var o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1,r=n.extra.radar||{};r.max=r.max||0;var s=Math.max(r.max,Math.max.apply(null,dataCombine(a))),l=[];return a.forEach(function(a){var n={};n.color=a.color,n.data=[],a.data.forEach(function(a,r){var l={};l.angle=t[r],l.proportion=a/s,l.position=convertCoordinateOrigin(i*l.proportion*o*Math.cos(l.angle),i*l.proportion*o*Math.sin(l.angle),e),n.data.push(l)}),l.push(n)}),l}function getPieDataPoints(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,i=0,a=0;return t.forEach(function(t){t.data=null===t.data?0:t.data,i+=t.data}),t.forEach(function(t){t.data=null===t.data?0:t.data,t._proportion_=t.data/i*e}),t.forEach(function(t){t._start_=a,a+=2*t._proportion_*Math.PI}),t}function getPieTextMaxLength(t){t=getPieDataPoints(t);var e=0;return t.forEach(function(t){var i=t.format?t.format(+t._proportion_.toFixed(2)):util.toFixed(100*t._proportion_)+"%";e=Math.max(e,measureText(i))}),e}function fixColumeData(t,e,i,a,n,o){return t.map(function(t){return null===t?null:(t.width=(e-2*n.columePadding)/i,o.extra.column&&o.extra.column.width&&+o.extra.column.width>0?t.width=Math.min(t.width,+o.extra.column.width):t.width=Math.min(t.width,25),t.x+=(a+.5-i/2)*t.width,t)})}function getXAxisPoints(t,e,i){var a=i.yAxisWidth+i.yAxisTitleWidth,n=e.width-2*i.padding-a,o=n/t.length,r=[],s=i.padding+a,l=e.width-i.padding;return t.forEach(function(t,e){r.push(s+e*o)}),r.push(l),{xAxisPoints:r,startX:s,endX:l,eachSpacing:o}}function getDataPoints(t,e,i,a,n,o,r){var s=arguments.length>7&&void 0!==arguments[7]?arguments[7]:1,l=[],h=o.height-2*r.padding-r.xAxisHeight-r.legendHeight;return t.forEach(function(t,c){if(null===t)l.push(null);else{var d={};d.x=a[c]+Math.round(n/2);var x=h*(t-e)/(i-e);x*=s,d.y=o.height-r.xAxisHeight-r.legendHeight-Math.round(x)-r.padding,l.push(d)}}),l}function getYAxisTextList(t,e,i){var a=dataCombine(t);a=a.filter(function(t){return null!==t});var n=Math.min.apply(this,a),o=Math.max.apply(this,a);if("number"==typeof e.yAxis.min&&(n=Math.min(e.yAxis.min,n)),"number"==typeof e.yAxis.max&&(o=Math.max(e.yAxis.max,o)),n===o){var r=o||1;n-=r,o+=r}for(var s=getDataRange(n,o),l=s.minRange,h=s.maxRange,c=[],d=(h-l)/i.yAxisSplit,x=0;x<=i.yAxisSplit;x++)c.push(l+d*x);return c.reverse()}function calYAxisData(t,e,i){var a=getYAxisTextList(t,e,i),n=i.yAxisWidth,o=a.map(function(t){return t=util.toFixed(t,2),t=e.yAxis.format?e.yAxis.format(Number(t)):t,n=Math.max(n,measureText(t)+5),t});return e.yAxis.disabled===!0&&(n=0),{rangesFormat:o,ranges:a,yAxisWidth:n}}function drawPointShape(t,e,i,a){a.beginPath(),a.setStrokeStyle("#ffffff"),a.setLineWidth(1),a.setFillStyle(e),"diamond"===i?t.forEach(function(t,e){null!==t&&(a.moveTo(t.x,t.y-4.5),a.lineTo(t.x-4.5,t.y),a.lineTo(t.x,t.y+4.5),a.lineTo(t.x+4.5,t.y),a.lineTo(t.x,t.y-4.5))}):"circle"===i?t.forEach(function(t,e){null!==t&&(a.moveTo(t.x+3.5,t.y),a.arc(t.x,t.y,4,0,2*Math.PI,!1))}):"rect"===i?t.forEach(function(t,e){null!==t&&(a.moveTo(t.x-3.5,t.y-3.5),a.rect(t.x-3.5,t.y-3.5,7,7))}):"triangle"===i&&t.forEach(function(t,e){null!==t&&(a.moveTo(t.x,t.y-4.5),a.lineTo(t.x-4.5,t.y+4.5),a.lineTo(t.x+4.5,t.y+4.5),a.lineTo(t.x,t.y-4.5))}),a.closePath(),a.fill(),a.stroke()}function drawRingTitle(t,e,i){var a=t.title.fontSize||e.titleFontSize,n=t.subtitle.fontSize||e.subtitleFontSize,o=t.title.name||"",r=t.subtitle.name||"",s=t.title.color||e.titleColor,l=t.subtitle.color||e.subtitleColor,h=o?a:0,c=r?n:0,d=5;if(r){var x=measureText(r,n),f=(t.width-x)/2+(t.subtitle.offsetX||0),u=(t.height-e.legendHeight+n)/2;o&&(u-=(h+d)/2),i.beginPath(),i.setFontSize(n),i.setFillStyle(l),i.fillText(r,f,u),i.stroke(),i.closePath()}if(o){var g=measureText(o,a),p=(t.width-g)/2+(t.title.offsetX||0),y=(t.height-e.legendHeight+a)/2;r&&(y+=(c+d)/2),i.beginPath(),i.setFontSize(a),i.setFillStyle(s),i.fillText(o,p,y),i.stroke(),i.closePath()}}function drawPointText(t,e,i,a){var n=e.data;a.beginPath(),a.setFontSize(i.fontSize),a.setFillStyle("#666666"),t.forEach(function(t,i){if(null!==t){var o=e.format?e.format(n[i]):n[i];a.fillText(o,t.x-measureText(o)/2,t.y-2)}}),a.closePath(),a.stroke()}function drawRadarLabel(t,e,i,a,n,o){var r=a.extra.radar||{};e+=n.radarLabelTextMargin,o.beginPath(),o.setFontSize(n.fontSize),o.setFillStyle(r.labelColor||"#666666"),t.forEach(function(t,r){var s={x:e*Math.cos(t),y:e*Math.sin(t)},l=convertCoordinateOrigin(s.x,s.y,i),h=l.x,c=l.y;util.approximatelyEqual(s.x,0)?h-=measureText(a.categories[r]||"")/2:s.x<0&&(h-=measureText(a.categories[r]||"")),o.fillText(a.categories[r]||"",h,c+n.fontSize/2)}),o.stroke(),o.closePath()}function drawPieText(t,e,i,a,n,o){var r=n+i.pieChartLinePadding,s=(r+i.pieChartTextPadding,[]),l=null,h=t.map(function(t){var e=2*Math.PI-(t._start_+2*Math.PI*t._proportion_/2),i=t.format?t.format(+t._proportion_.toFixed(2)):util.toFixed(100*t._proportion_)+"%",a=t.color;return{arc:e,text:i,color:a}});h.forEach(function(t){var e=Math.cos(t.arc)*r,a=Math.sin(t.arc)*r,o=Math.cos(t.arc)*n,h=Math.sin(t.arc)*n,c=e>=0?e+i.pieChartTextPadding:e-i.pieChartTextPadding,d=a,x=measureText(t.text),f=d;l&&util.isSameXCoordinateArea(l.start,{x:c})&&(f=c>0?Math.min(d,l.start.y):e<0?Math.max(d,l.start.y):d>0?Math.max(d,l.start.y):Math.min(d,l.start.y)),c<0&&(c-=x);var u={lineStart:{x:o,y:h},lineEnd:{x:e,y:a},start:{x:c,y:f},width:x,height:i.fontSize,text:t.text,color:t.color};l=avoidCollision(u,l),s.push(l)}),s.forEach(function(t){var e=convertCoordinateOrigin(t.lineStart.x,t.lineStart.y,o),n=convertCoordinateOrigin(t.lineEnd.x,t.lineEnd.y,o),r=convertCoordinateOrigin(t.start.x,t.start.y,o);a.setLineWidth(1),a.setFontSize(i.fontSize),a.beginPath(),a.setStrokeStyle(t.color),a.setFillStyle(t.color),a.moveTo(e.x,e.y);var s=t.start.x<0?r.x+t.width:r.x,l=t.start.x<0?r.x-5:r.x+5;a.quadraticCurveTo(n.x,n.y,s,r.y),a.moveTo(e.x,e.y),a.stroke(),a.closePath(),a.beginPath(),a.moveTo(r.x+t.width,r.y),a.arc(s,r.y,2,0,2*Math.PI),a.closePath(),a.fill(),a.beginPath(),a.setFillStyle("#666666"),a.fillText(t.text,l,r.y+3),a.closePath(),a.stroke(),a.closePath()})}function drawToolTipSplitLine(t,e,i,a){var n=i.padding,o=e.height-i.padding-i.xAxisHeight-i.legendHeight;a.beginPath(),a.setStrokeStyle("#cccccc"),a.setLineWidth(1),a.moveTo(t,n),a.lineTo(t,o),a.stroke(),a.closePath()}function drawToolTip(t,e,i,a,n){var o=4,r=5,s=8,l=!1;e=assign({x:0,y:0},e),e.y-=8;var h=t.map(function(t){return measureText(t.text)}),c=o+r+4*a.toolTipPadding+Math.max.apply(null,h),d=2*a.toolTipPadding+t.length*a.toolTipLineHeight;e.x+s+c>i.width&&(l=!0),n.beginPath(),n.setFillStyle(i.tooltip.option.background||a.toolTipBackground),n.setGlobalAlpha(a.toolTipOpacity),l?(n.moveTo(e.x,e.y+10),n.lineTo(e.x-s,e.y+10-5),n.lineTo(e.x-s,e.y+10+5),n.moveTo(e.x,e.y+10),n.fillRect(e.x-c-s,e.y,c,d)):(n.moveTo(e.x,e.y+10),n.lineTo(e.x+s,e.y+10-5),n.lineTo(e.x+s,e.y+10+5),n.moveTo(e.x,e.y+10),n.fillRect(e.x+s,e.y,c,d)),n.closePath(),n.fill(),n.setGlobalAlpha(1),t.forEach(function(t,i){n.beginPath(),n.setFillStyle(t.color);var r=e.x+s+2*a.toolTipPadding,h=e.y+(a.toolTipLineHeight-a.fontSize)/2+a.toolTipLineHeight*i+a.toolTipPadding;l&&(r=e.x-c-s+2*a.toolTipPadding),n.fillRect(r,h,o,a.fontSize),n.closePath()}),n.beginPath(),n.setFontSize(a.fontSize),n.setFillStyle("#ffffff"),t.forEach(function(t,i){var h=e.x+s+2*a.toolTipPadding+o+r;l&&(h=e.x-c-s+2*a.toolTipPadding+ +o+r);var d=e.y+(a.toolTipLineHeight-a.fontSize)/2+a.toolTipLineHeight*i+a.toolTipPadding;n.fillText(t.text,h,d+a.fontSize)}),n.stroke(),n.closePath()}function drawYAxisTitle(t,e,i,a){var n=i.xAxisHeight+(e.height-i.xAxisHeight-measureText(t))/2;a.save(),a.beginPath(),a.setFontSize(i.fontSize),a.setFillStyle(e.yAxis.titleFontColor||"#333333"),a.translate(0,e.height),a.rotate(-90*Math.PI/180),a.fillText(t,n,i.padding+.5*i.fontSize),a.stroke(),a.closePath(),a.restore()}function drawColumnDataPoints(t,e,i,a){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,o=calYAxisData(t,e,i),r=o.ranges,s=getXAxisPoints(e.categories,e,i),l=s.xAxisPoints,h=s.eachSpacing,c=r.pop(),d=r.shift();e.height-i.padding-i.xAxisHeight-i.legendHeight;return t.forEach(function(o,r){var s=o.data,x=getDataPoints(s,c,d,l,h,e,i,n);x=fixColumeData(x,h,t.length,r,i,e),a.beginPath(),a.setFillStyle(o.color),x.forEach(function(t,n){if(null!==t){var o=t.x-t.width/2+1,r=e.height-t.y-i.padding-i.xAxisHeight-i.legendHeight;a.moveTo(o,t.y),a.rect(o,t.y,t.width-2,r)}}),a.closePath(),a.fill()}),t.forEach(function(o,r){var s=o.data,x=getDataPoints(s,c,d,l,h,e,i,n);x=fixColumeData(x,h,t.length,r,i,e),e.dataLabel!==!1&&1===n&&drawPointText(x,o,i,a)}),l}function drawAreaDataPoints(t,e,i,a){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,o=calYAxisData(t,e,i),r=o.ranges,s=getXAxisPoints(e.categories,e,i),l=s.xAxisPoints,h=s.eachSpacing,c=r.pop(),d=r.shift(),x=e.height-i.padding-i.xAxisHeight-i.legendHeight,f=[];return e.tooltip&&e.tooltip.textList&&e.tooltip.textList.length&&1===n&&drawToolTipSplitLine(e.tooltip.offset.x,e,i,a),t.forEach(function(t,o){var r=t.data,s=getDataPoints(r,c,d,l,h,e,i,n);f.push(s);var u=splitPoints(s);if(u.forEach(function(i){if(a.beginPath(),a.setStrokeStyle(t.color),a.setFillStyle(t.color),a.setGlobalAlpha(.6),a.setLineWidth(2),i.length>1){var n=i[0],o=i[i.length-1];a.moveTo(n.x,n.y),"curve"===e.extra.lineStyle?i.forEach(function(t,e){if(e>0){var n=createCurveControlPoints(i,e-1);a.bezierCurveTo(n.ctrA.x,n.ctrA.y,n.ctrB.x,n.ctrB.y,t.x,t.y)}}):i.forEach(function(t,e){e>0&&a.lineTo(t.x,t.y)}),a.lineTo(o.x,x),a.lineTo(n.x,x),a.lineTo(n.x,n.y)}else{var r=i[0];a.moveTo(r.x-h/2,r.y),a.lineTo(r.x+h/2,r.y),a.lineTo(r.x+h/2,x),a.lineTo(r.x-h/2,x),a.moveTo(r.x-h/2,r.y)}a.closePath(),a.fill(),a.setGlobalAlpha(1)}),e.dataPointShape!==!1){var g=i.dataPointShape[o%i.dataPointShape.length];drawPointShape(s,t.color,g,a)}}),e.dataLabel!==!1&&1===n&&t.forEach(function(t,o){var r=t.data,s=getDataPoints(r,c,d,l,h,e,i,n);drawPointText(s,t,i,a)}),e.tooltip&&e.tooltip.textList&&e.tooltip.textList.length&&1===n&&drawToolTip(e.tooltip.textList,e.tooltip.offset,e,i,a),{xAxisPoints:l,calPoints:f}}function drawLineDataPoints(t,e,i,a){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,o=calYAxisData(t,e,i),r=o.ranges,s=getXAxisPoints(e.categories,e,i),l=s.xAxisPoints,h=s.eachSpacing,c=r.pop(),d=r.shift(),x=[];return e.tooltip&&e.tooltip.textList&&e.tooltip.textList.length&&1===n&&drawToolTipSplitLine(e.tooltip.offset.x,e,i,a),t.forEach(function(t,o){var r=t.data,s=getDataPoints(r,c,d,l,h,e,i,n);x.push(s);var f=splitPoints(s);if(f.forEach(function(i,n){a.beginPath(),a.setStrokeStyle(t.color),a.setLineWidth(2),1===i.length?(a.moveTo(i[0].x,i[0].y),a.arc(i[0].x,i[0].y,1,0,2*Math.PI)):(a.moveTo(i[0].x,i[0].y),"curve"===e.extra.lineStyle?i.forEach(function(t,e){if(e>0){var n=createCurveControlPoints(i,e-1);a.bezierCurveTo(n.ctrA.x,n.ctrA.y,n.ctrB.x,n.ctrB.y,t.x,t.y)}}):i.forEach(function(t,e){e>0&&a.lineTo(t.x,t.y)}),a.moveTo(i[0].x,i[0].y)),a.closePath(),a.stroke()}),e.dataPointShape!==!1){var u=i.dataPointShape[o%i.dataPointShape.length];drawPointShape(s,t.color,u,a)}}),e.dataLabel!==!1&&1===n&&t.forEach(function(t,o){var r=t.data,s=getDataPoints(r,c,d,l,h,e,i,n);drawPointText(s,t,i,a)}),e.tooltip&&e.tooltip.textList&&e.tooltip.textList.length&&1===n&&drawToolTip(e.tooltip.textList,e.tooltip.offset,e,i,a),{xAxisPoints:l,calPoints:x}}function drawXAxis(t,e,i,a){var n=getXAxisPoints(t,e,i),o=n.xAxisPoints,r=n.startX,s=n.endX,l=n.eachSpacing,h=e.height-i.padding-i.xAxisHeight-i.legendHeight,c=h+i.xAxisLineHeight;a.beginPath(),a.setStrokeStyle(e.xAxis.gridColor||"#cccccc"),a.setLineWidth(1),a.moveTo(r,h),a.lineTo(s,h),e.xAxis.disableGrid!==!0&&("calibration"===e.xAxis.type?o.forEach(function(t,e){e>0&&(a.moveTo(t-l/2,h),a.lineTo(t-l/2,h+4))}):o.forEach(function(t,e){a.moveTo(t,h),a.lineTo(t,c)})),a.closePath(),a.stroke();var d=e.width-2*i.padding-i.yAxisWidth-i.yAxisTitleWidth,x=Math.min(t.length,Math.ceil(d/i.fontSize/1.5)),f=Math.ceil(t.length/x);t=t.map(function(t,e){return e%f!==0?"":t}),0===i._xAxisTextAngle_?(a.beginPath(),a.setFontSize(i.fontSize),a.setFillStyle(e.xAxis.fontColor||"#666666"),t.forEach(function(t,e){var n=l/2-measureText(t)/2;a.fillText(t,o[e]+n,h+i.fontSize+5)}),a.closePath(),a.stroke()):t.forEach(function(t,n){a.save(),a.beginPath(),a.setFontSize(i.fontSize),a.setFillStyle(e.xAxis.fontColor||"#666666");var r=measureText(t),s=l/2-r,c=calRotateTranslate(o[n]+l/2,h+i.fontSize/2+5,e.height),d=c.transX,x=c.transY;a.rotate(-1*i._xAxisTextAngle_),a.translate(d,x),a.fillText(t,o[n]+s,h+i.fontSize+5),a.closePath(),a.stroke(),a.restore()})}function drawYAxis(t,e,i,a){if(e.yAxis.disabled!==!0){for(var n=calYAxisData(t,e,i),o=n.rangesFormat,r=i.yAxisWidth+i.yAxisTitleWidth,s=e.height-2*i.padding-i.xAxisHeight-i.legendHeight,l=Math.floor(s/i.yAxisSplit),h=i.padding+r,c=e.width-i.padding,d=(i.padding,e.height-i.padding-i.xAxisHeight-i.legendHeight),x=[],f=0;f4&&void 0!==arguments[4]?arguments[4]:1;t=getPieDataPoints(t,n);var o={x:e.width/2,y:(e.height-i.legendHeight)/2},r=Math.min(o.x-i.pieChartLinePadding-i.pieChartTextPadding-i._pieTextMaxLength_,o.y-i.pieChartLinePadding-i.pieChartTextPadding);if(r-=e.dataLabel?10:2*i.padding,t.forEach(function(t){a.beginPath(),a.setLineWidth(2),a.setStrokeStyle("#ffffff"),a.setFillStyle(t.color),a.moveTo(o.x,o.y),a.arc(o.x,o.y,r,t._start_,t._start_+2*t._proportion_*Math.PI),a.closePath(),a.fill(),e.disablePieStroke!==!0&&a.stroke()}),"ring"===e.type){var s=.6*r;"number"==typeof e.extra.ringWidth&&e.extra.ringWidth>0&&(s=Math.max(0,r-e.extra.ringWidth)),a.beginPath(),a.setFillStyle("#ffffff"),a.moveTo(o.x,o.y),a.arc(o.x,o.y,s,0,2*Math.PI),a.closePath(),a.fill()}return e.dataLabel!==!1&&1===n&&drawPieText(t,e,i,a,r,o),1===n&&"ring"===e.type&&drawRingTitle(e,i,a),{center:o,radius:r,series:t}}function drawRadarDataPoints(t,e,i,a){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,o=e.extra.radar||{},r=getRadarCoordinateSeries(e.categories.length),s={x:e.width/2,y:(e.height-i.legendHeight)/2},l=Math.min(s.x-(getMaxTextListLength(e.categories)+i.radarLabelTextMargin),s.y-i.radarLabelTextMargin);l-=i.padding,a.beginPath(),a.setLineWidth(1),a.setStrokeStyle(o.gridColor||"#cccccc"),r.forEach(function(t){var e=convertCoordinateOrigin(l*Math.cos(t),l*Math.sin(t),s);a.moveTo(s.x,s.y),a.lineTo(e.x,e.y)}),a.stroke(),a.closePath();for(var h=function(t){var e={};a.beginPath(),a.setLineWidth(1),a.setStrokeStyle(o.gridColor||"#cccccc"),r.forEach(function(n,o){var r=convertCoordinateOrigin(l/i.radarGridCount*t*Math.cos(n),l/i.radarGridCount*t*Math.sin(n),s);0===o?(e=r,a.moveTo(r.x,r.y)):a.lineTo(r.x,r.y)}),a.lineTo(e.x,e.y),a.stroke(),a.closePath()},c=1;c<=i.radarGridCount;c++)h(c);var d=getRadarDataPoints(r,s,l,t,e,n);return d.forEach(function(t,n){if(a.beginPath(),a.setFillStyle(t.color),a.setGlobalAlpha(.6),t.data.forEach(function(t,e){0===e?a.moveTo(t.position.x,t.position.y):a.lineTo(t.position.x,t.position.y)}),a.closePath(),a.fill(),a.setGlobalAlpha(1),e.dataPointShape!==!1){var o=i.dataPointShape[n%i.dataPointShape.length],r=t.data.map(function(t){return t.position});drawPointShape(r,t.color,o,a)}}),drawRadarLabel(r,l,s,e,i,a),{center:s,radius:l,angleList:r}}function drawCanvas(t,e){e.draw()}function Animation(t){this.isStop=!1,t.duration="undefined"==typeof t.duration?1e3:t.duration,t.timing=t.timing||"linear";var e=17,i=function(){return"undefined"!=typeof requestAnimationFrame?requestAnimationFrame:"undefined"!=typeof setTimeout?function(t,e){setTimeout(function(){var e=+new Date;t(e)},e)}:function(t){t(null)}},a=i(),n=null,o=function(i){if(null===i||this.isStop===!0)return t.onProcess&&t.onProcess(1),void(t.onAnimationFinish&&t.onAnimationFinish());if(null===n&&(n=i),i-nt.end.x||e.end.xt.start.y||e.start.y0&&void 0!==arguments[0]?arguments[0]:{};this.opts.series=t.series||this.opts.series,this.opts.categories=t.categories||this.opts.categories,this.opts.title=assign({},this.opts.title,t.title||{}),this.opts.subtitle=assign({},this.opts.subtitle,t.subtitle||{}),drawCharts.call(this,this.opts.type,this.opts,this.config,this.context)},Charts.prototype.stopAnimation=function(){this.animationInstance&&this.animationInstance.stop()},Charts.prototype.addEventListener=function(t,e){this.event.addEventListener(t,e)},Charts.prototype.getCurrentDataIndex=function(t){if(t.touches&&t.touches.length){var e=t.touches[0],i=e.x,a=e.y;return"pie"===this.opts.type||"ring"===this.opts.type?findPieChartCurrentIndex({x:i,y:a},this.chartData.pieData):"radar"===this.opts.type?findRadarChartCurrentIndex({x:i,y:a},this.chartData.radarData,this.opts.categories.length):findCurrentIndex({x:i,y:a},this.chartData.xAxisPoints,this.opts,this.config)}return-1},Charts.prototype.showToolTip=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if("line"===this.opts.type||"area"===this.opts.type){var i=this.getCurrentDataIndex(t),a=assign({},this.opts,{animation:!1});if(i>-1){var n=getSeriesDataItem(this.opts.series,i);if(0===n.length)drawCharts.call(this,a.type,a,this.config,this.context);else{var o=getToolTipData(n,this.chartData.calPoints,i),r=o.textList,s=o.offset;a.tooltip={textList:r,offset:s,option:e},drawCharts.call(this,a.type,a,this.config,this.context)}}else drawCharts.call(this,a.type,a,this.config,this.context)}},module.exports=Charts; +"use strict";function assign(t,e){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var i=Object(t),a=1;at.length-3){var r=t.length-1;n=t[r].x-.2*(t[r].x-t[r-1].x),o=t[r].y-.2*(t[r].y-t[r-1].y)}else n=t[e+1].x-.2*(t[e+2].x-t[e].x),o=t[e+1].y-.2*(t[e+2].y-t[e].y);return{ctrA:{x:i,y:a},ctrB:{x:n,y:o}}}function convertCoordinateOrigin(t,e,i){return{x:i.x+t,y:i.y-e}}function avoidCollision(t,e){if(e)for(;util.isCollision(t,e);)t.start.x>0?t.start.y--:t.start.x<0?t.start.y++:t.start.y>0?t.start.y++:t.start.y--;return t}function fillSeriesColor(t,e){var i=0;return t.map(function(t){return t.color||(t.color=e.colors[i],i=(i+1)%e.colors.length),t})}function getDataRange(t,e){var i=0,a=e-t;return i=a>=1e4?1e3:a>=1e3?100:a>=100?10:a>=10?5:a>=1?1:a>=.1?.1:.01,{minRange:findRange(t,"lower",i),maxRange:findRange(e,"upper",i)}}function measureText(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:10;t=String(t);var t=t.split(""),i=0;return t.forEach(function(t){/[a-zA-Z]/.test(t)?i+=7:/[0-9]/.test(t)?i+=5.5:/\./.test(t)?i+=2.7:/-/.test(t)?i+=3.25:/[\u4e00-\u9fa5]/.test(t)?i+=10:/\(|\)/.test(t)?i+=3.73:/\s/.test(t)?i+=2.5:/%/.test(t)?i+=8:i+=10}),i*e/10}function dataCombine(t){return t.reduce(function(t,e){return(t.data?t.data:t).concat(e.data)},[])}function getSeriesDataItem(t,e){var i=[];return t.forEach(function(t){if(null!==t.data[e]&&"undefinded"!=typeof t.data[e]){var a={};a.color=t.color,a.name=t.name,a.data=t.format?t.format(t.data[e]):t.data[e],i.push(a)}}),i}function getMaxTextListLength(t){var e=t.map(function(t){return measureText(t)});return Math.max.apply(null,e)}function getRadarCoordinateSeries(t){for(var e=2*Math.PI/t,i=[],a=0;ae&&(n=i)}),n}function isInExactChartArea(t,e,i){return t.xi.padding+i.yAxisWidth+i.yAxisTitleWidth&&t.y>i.padding&&t.y2*Math.PI&&(t-=2*Math.PI),t},r=Math.atan2(e.center.y-t.y,t.x-e.center.x);r*=-1,r<0&&(r+=2*Math.PI);e.angleList.map(function(t){return t=o(-1*t)}).forEach(function(t,e){var i=o(t-a/2),s=o(t+a/2);s=i&&r<=s||r+2*Math.PI>=i&&r+2*Math.PI<=s)&&(n=e)})}return n}function findPieChartCurrentIndex(t,e){var i=-1;if(isInExactPieChartArea(t,e.center,e.radius)){var a=Math.atan2(e.center.y-t.y,t.x-e.center.x);a<0&&(a+=2*Math.PI),a=2*Math.PI-a,e.series.forEach(function(t,e){a>t._start_&&(i=e)})}return i}function isInExactPieChartArea(t,e,i){return Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)<=Math.pow(i,2)}function splitPoints(t){var e=[],i=[];return t.forEach(function(t,a){null!==t?i.push(t):(i.length&&e.push(i),i=[])}),i.length&&e.push(i),e}function calLegendData(t,e,i){if(!1===e.legend)return{legendList:[],legendHeight:0};var a=[],n=0,o=[];return t.forEach(function(t){var i=30+measureText(t.name||"undefinded");n+i>e.width?(a.push(o),n=i,o=[t]):(n+=i,o.push(t))}),o.length&&a.push(o),{legendList:a,legendHeight:a.length*(i.fontSize+8)+5}}function calCategoriesData(t,e,i){var a={angle:0,xAxisHeight:i.xAxisHeight},n=getXAxisPoints(t,e,i),o=n.eachSpacing,r=t.map(function(t){return measureText(t)}),s=Math.max.apply(this,r);return s+2*i.xAxisTextPadding>o&&(a.angle=45*Math.PI/180,a.xAxisHeight=2*i.xAxisTextPadding+s*Math.sin(a.angle)),a}function getRadarDataPoints(t,e,i,a,n){var o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1,r=n.extra.radar||{};r.max=r.max||0;var s=Math.max(r.max,Math.max.apply(null,dataCombine(a))),l=[];return a.forEach(function(a){var n={};n.color=a.color,n.data=[],a.data.forEach(function(a,r){var l={};l.angle=t[r],l.proportion=a/s,l.position=convertCoordinateOrigin(i*l.proportion*o*Math.cos(l.angle),i*l.proportion*o*Math.sin(l.angle),e),n.data.push(l)}),l.push(n)}),l}function getPieDataPoints(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,i=0,a=0;return t.forEach(function(t){t.data=null===t.data?0:t.data,i+=t.data}),t.forEach(function(t){t.data=null===t.data?0:t.data,t._proportion_=t.data/i*e}),t.forEach(function(t){t._start_=a,a+=2*t._proportion_*Math.PI}),t}function getPieTextMaxLength(t){t=getPieDataPoints(t);var e=0;return t.forEach(function(t){var i=t.format?t.format(+t._proportion_.toFixed(2)):util.toFixed(100*t._proportion_)+"%";e=Math.max(e,measureText(i))}),e}function fixColumeData(t,e,i,a,n,o){return t.map(function(t){return null===t?null:(t.width=(e-2*n.columePadding)/i,o.extra.column&&o.extra.column.width&&+o.extra.column.width>0?t.width=Math.min(t.width,+o.extra.column.width):t.width=Math.min(t.width,25),t.x+=(a+.5-i/2)*t.width,t)})}function getXAxisPoints(t,e,i){var a=i.yAxisWidth+i.yAxisTitleWidth,n=e.width-2*i.padding-a,o=n/t.length,r=[],s=i.padding+a,l=e.width-i.padding;return t.forEach(function(t,e){r.push(s+e*o)}),r.push(l),{xAxisPoints:r,startX:s,endX:l,eachSpacing:o}}function getDataPoints(t,e,i,a,n,o,r){var s=arguments.length>7&&void 0!==arguments[7]?arguments[7]:1,l=[],h=o.height-2*r.padding-r.xAxisHeight-r.legendHeight;return t.forEach(function(t,c){if(null===t)l.push(null);else{var d={};d.x=a[c]+Math.round(n/2);var x=h*(t-e)/(i-e);x*=s,d.y=o.height-r.xAxisHeight-r.legendHeight-Math.round(x)-r.padding,l.push(d)}}),l}function getYAxisTextList(t,e,i){var a=dataCombine(t);a=a.filter(function(t){return null!==t});var n=Math.min.apply(this,a),o=Math.max.apply(this,a);if("number"==typeof e.yAxis.min&&(n=Math.min(e.yAxis.min,n)),"number"==typeof e.yAxis.max&&(o=Math.max(e.yAxis.max,o)),n===o){var r=o||1;n-=r,o+=r}for(var s=getDataRange(n,o),l=s.minRange,h=s.maxRange,c=[],d=(h-l)/i.yAxisSplit,x=0;x<=i.yAxisSplit;x++)c.push(l+d*x);return c.reverse()}function calYAxisData(t,e,i){var a=getYAxisTextList(t,e,i),n=i.yAxisWidth,o=a.map(function(t){return t=util.toFixed(t,2),t=e.yAxis.format?e.yAxis.format(Number(t)):t,n=Math.max(n,measureText(t)+5),t});return!0===e.yAxis.disabled&&(n=0),{rangesFormat:o,ranges:a,yAxisWidth:n}}function drawPointShape(t,e,i,a){a.beginPath(),a.setStrokeStyle("#ffffff"),a.setLineWidth(1),a.setFillStyle(e),"diamond"===i?t.forEach(function(t,e){null!==t&&(a.moveTo(t.x,t.y-4.5),a.lineTo(t.x-4.5,t.y),a.lineTo(t.x,t.y+4.5),a.lineTo(t.x+4.5,t.y),a.lineTo(t.x,t.y-4.5))}):"circle"===i?t.forEach(function(t,e){null!==t&&(a.moveTo(t.x+3.5,t.y),a.arc(t.x,t.y,4,0,2*Math.PI,!1))}):"rect"===i?t.forEach(function(t,e){null!==t&&(a.moveTo(t.x-3.5,t.y-3.5),a.rect(t.x-3.5,t.y-3.5,7,7))}):"triangle"===i&&t.forEach(function(t,e){null!==t&&(a.moveTo(t.x,t.y-4.5),a.lineTo(t.x-4.5,t.y+4.5),a.lineTo(t.x+4.5,t.y+4.5),a.lineTo(t.x,t.y-4.5))}),a.closePath(),a.fill(),a.stroke()}function drawRingTitle(t,e,i){var a=t.title.fontSize||e.titleFontSize,n=t.subtitle.fontSize||e.subtitleFontSize,o=t.title.name||"",r=t.subtitle.name||"",s=t.title.color||e.titleColor,l=t.subtitle.color||e.subtitleColor,h=o?a:0,c=r?n:0;if(r){var d=measureText(r,n),x=(t.width-d)/2+(t.subtitle.offsetX||0),f=(t.height-e.legendHeight+n)/2;o&&(f-=(h+5)/2),i.beginPath(),i.setFontSize(n),i.setFillStyle(l),i.fillText(r,x,f),i.stroke(),i.closePath()}if(o){var u=measureText(o,a),g=(t.width-u)/2+(t.title.offsetX||0),p=(t.height-e.legendHeight+a)/2;r&&(p+=(c+5)/2),i.beginPath(),i.setFontSize(a),i.setFillStyle(s),i.fillText(o,g,p),i.stroke(),i.closePath()}}function drawPointText(t,e,i,a){var n=e.data;a.beginPath(),a.setFontSize(i.fontSize),a.setFillStyle("#666666"),t.forEach(function(t,i){if(null!==t){var o=e.format?e.format(n[i]):n[i];a.fillText(o,t.x-measureText(o)/2,t.y-2)}}),a.closePath(),a.stroke()}function drawRadarLabel(t,e,i,a,n,o){var r=a.extra.radar||{};e+=n.radarLabelTextMargin,o.beginPath(),o.setFontSize(n.fontSize),o.setFillStyle(r.labelColor||"#666666"),t.forEach(function(t,r){var s={x:e*Math.cos(t),y:e*Math.sin(t)},l=convertCoordinateOrigin(s.x,s.y,i),h=l.x,c=l.y;util.approximatelyEqual(s.x,0)?h-=measureText(a.categories[r]||"")/2:s.x<0&&(h-=measureText(a.categories[r]||"")),o.fillText(a.categories[r]||"",h,c+n.fontSize/2)}),o.stroke(),o.closePath()}function drawPieText(t,e,i,a,n,o){var r=n+i.pieChartLinePadding,s=(i.pieChartTextPadding,[]),l=null;t.map(function(t){return{arc:2*Math.PI-(t._start_+2*Math.PI*t._proportion_/2),text:t.format?t.format(+t._proportion_.toFixed(2)):util.toFixed(100*t._proportion_)+"%",color:t.color}}).forEach(function(t){var e=Math.cos(t.arc)*r,a=Math.sin(t.arc)*r,o=Math.cos(t.arc)*n,h=Math.sin(t.arc)*n,c=e>=0?e+i.pieChartTextPadding:e-i.pieChartTextPadding,d=a,x=measureText(t.text),f=d;l&&util.isSameXCoordinateArea(l.start,{x:c})&&(f=c>0?Math.min(d,l.start.y):e<0?Math.max(d,l.start.y):d>0?Math.max(d,l.start.y):Math.min(d,l.start.y)),c<0&&(c-=x);var u={lineStart:{x:o,y:h},lineEnd:{x:e,y:a},start:{x:c,y:f},width:x,height:i.fontSize,text:t.text,color:t.color};l=avoidCollision(u,l),s.push(l)}),s.forEach(function(t){var e=convertCoordinateOrigin(t.lineStart.x,t.lineStart.y,o),n=convertCoordinateOrigin(t.lineEnd.x,t.lineEnd.y,o),r=convertCoordinateOrigin(t.start.x,t.start.y,o);a.setLineWidth(1),a.setFontSize(i.fontSize),a.beginPath(),a.setStrokeStyle(t.color),a.setFillStyle(t.color),a.moveTo(e.x,e.y);var s=t.start.x<0?r.x+t.width:r.x,l=t.start.x<0?r.x-5:r.x+5;a.quadraticCurveTo(n.x,n.y,s,r.y),a.moveTo(e.x,e.y),a.stroke(),a.closePath(),a.beginPath(),a.moveTo(r.x+t.width,r.y),a.arc(s,r.y,2,0,2*Math.PI),a.closePath(),a.fill(),a.beginPath(),a.setFillStyle("#666666"),a.fillText(t.text,l,r.y+3),a.closePath(),a.stroke(),a.closePath()})}function drawToolTipSplitLine(t,e,i,a){var n=i.padding,o=e.height-i.padding-i.xAxisHeight-i.legendHeight;a.beginPath(),a.setStrokeStyle("#cccccc"),a.setLineWidth(1),a.moveTo(t,n),a.lineTo(t,o),a.stroke(),a.closePath()}function drawToolTip(t,e,i,a,n){var o=!1;e=assign({x:0,y:0},e),e.y-=8;var r=t.map(function(t){return measureText(t.text)}),s=9+4*a.toolTipPadding+Math.max.apply(null,r),l=2*a.toolTipPadding+t.length*a.toolTipLineHeight;e.x+8+s>i.width&&(o=!0),n.beginPath(),n.setFillStyle(i.tooltip.option.background||a.toolTipBackground),n.setGlobalAlpha(a.toolTipOpacity),o?(n.moveTo(e.x,e.y+10),n.lineTo(e.x-8,e.y+10-5),n.lineTo(e.x-8,e.y+10+5),n.moveTo(e.x,e.y+10),n.fillRect(e.x-s-8,e.y,s,l)):(n.moveTo(e.x,e.y+10),n.lineTo(e.x+8,e.y+10-5),n.lineTo(e.x+8,e.y+10+5),n.moveTo(e.x,e.y+10),n.fillRect(e.x+8,e.y,s,l)),n.closePath(),n.fill(),n.setGlobalAlpha(1),t.forEach(function(t,i){n.beginPath(),n.setFillStyle(t.color);var r=e.x+8+2*a.toolTipPadding,l=e.y+(a.toolTipLineHeight-a.fontSize)/2+a.toolTipLineHeight*i+a.toolTipPadding;o&&(r=e.x-s-8+2*a.toolTipPadding),n.fillRect(r,l,4,a.fontSize),n.closePath()}),n.beginPath(),n.setFontSize(a.fontSize),n.setFillStyle("#ffffff"),t.forEach(function(t,i){var r=e.x+8+2*a.toolTipPadding+4+5;o&&(r=e.x-s-8+2*a.toolTipPadding+4+5);var l=e.y+(a.toolTipLineHeight-a.fontSize)/2+a.toolTipLineHeight*i+a.toolTipPadding;n.fillText(t.text,r,l+a.fontSize)}),n.stroke(),n.closePath()}function drawYAxisTitle(t,e,i,a){var n=i.xAxisHeight+(e.height-i.xAxisHeight-measureText(t))/2;a.save(),a.beginPath(),a.setFontSize(i.fontSize),a.setFillStyle(e.yAxis.titleFontColor||"#333333"),a.translate(0,e.height),a.rotate(-90*Math.PI/180),a.fillText(t,n,i.padding+.5*i.fontSize),a.stroke(),a.closePath(),a.restore()}function dashedLineTodashedLineTo(t,e,i,a,n,o){o=o=0===o||void 0===o?5:o;for(var r=Math.floor(Math.sqrt(Math.pow(a-e,2)+Math.pow(n-i,2))/o),s=0;s4&&void 0!==arguments[4]?arguments[4]:1,o=calYAxisData(t,e,i),r=o.ranges,s=getXAxisPoints(e.categories,e,i),l=s.xAxisPoints,h=s.eachSpacing,c=r.pop(),d=r.shift(),x=(e.height,i.padding,i.xAxisHeight,i.legendHeight,[]);return t.forEach(function(o,r){var s=o.data,f=getDataPoints(s,c,d,l,h,e,i,n);f=fixColumeData(f,h,t.length,r,i,e),x.push(f),a.beginPath(),a.setFillStyle(o.color),f.forEach(function(t,n){if(null!==t){var o=t.x-t.width/2+1,r=e.height-t.y-i.padding-i.xAxisHeight-i.legendHeight;a.moveTo(o,t.y),a.rect(o,t.y,t.width-2,r)}}),a.closePath(),a.fill()}),t.forEach(function(o,r){var s=o.data,x=getDataPoints(s,c,d,l,h,e,i,n);x=fixColumeData(x,h,t.length,r,i,e),!1!==e.dataLabel&&1===n&&drawPointText(x,o,i,a)}),e.tooltip&&e.tooltip.textList&&e.tooltip.textList.length&&1===n&&drawToolTip(e.tooltip.textList,e.tooltip.offset,e,i,a),{xAxisPoints:l,calPoints:x}}function drawAreaDataPoints(t,e,i,a){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,o=calYAxisData(t,e,i),r=o.ranges,s=getXAxisPoints(e.categories,e,i),l=s.xAxisPoints,h=s.eachSpacing,c=r.pop(),d=r.shift(),x=e.height-i.padding-i.xAxisHeight-i.legendHeight,f=[];return e.tooltip&&e.tooltip.textList&&e.tooltip.textList.length&&1===n&&drawToolTipSplitLine(e.tooltip.offset.x,e,i,a),t.forEach(function(t,o){var r=t.data,s=getDataPoints(r,c,d,l,h,e,i,n);if(f.push(s),splitPoints(s).forEach(function(i){if(a.beginPath(),a.setStrokeStyle(t.color),a.setFillStyle(t.color),a.setGlobalAlpha(.6),a.setLineWidth(2),i.length>1){var n=i[0],o=i[i.length-1];a.moveTo(n.x,n.y),"curve"===e.extra.lineStyle?i.forEach(function(t,e){if(e>0){var n=createCurveControlPoints(i,e-1);a.bezierCurveTo(n.ctrA.x,n.ctrA.y,n.ctrB.x,n.ctrB.y,t.x,t.y)}}):i.forEach(function(t,e){e>0&&a.lineTo(t.x,t.y)}),a.lineTo(o.x,x),a.lineTo(n.x,x),a.lineTo(n.x,n.y)}else{var r=i[0];a.moveTo(r.x-h/2,r.y),a.lineTo(r.x+h/2,r.y),a.lineTo(r.x+h/2,x),a.lineTo(r.x-h/2,x),a.moveTo(r.x-h/2,r.y)}a.closePath(),a.fill(),a.setGlobalAlpha(1)}),!1!==e.dataPointShape){var u=i.dataPointShape[o%i.dataPointShape.length];drawPointShape(s,t.color,u,a)}}),!1!==e.dataLabel&&1===n&&t.forEach(function(t,o){drawPointText(getDataPoints(t.data,c,d,l,h,e,i,n),t,i,a)}),e.tooltip&&e.tooltip.textList&&e.tooltip.textList.length&&1===n&&drawToolTip(e.tooltip.textList,e.tooltip.offset,e,i,a),{xAxisPoints:l,calPoints:f}}function drawLineDataPoints(t,e,i,a){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,o=calYAxisData(t,e,i),r=o.ranges,s=getXAxisPoints(e.categories,e,i),l=s.xAxisPoints,h=s.eachSpacing,c=r.pop(),d=r.shift(),x=[];return e.tooltip&&e.tooltip.textList&&e.tooltip.textList.length&&1===n&&drawToolTipSplitLine(e.tooltip.offset.x,e,i,a),t.forEach(function(t,o){var r=t.data,s=getDataPoints(r,c,d,l,h,e,i,n);if(x.push(s),splitPoints(s).forEach(function(i,n){a.beginPath(),a.setStrokeStyle(t.color),a.setLineWidth(2),1===i.length?(a.moveTo(i[0].x,i[0].y),a.arc(i[0].x,i[0].y,1,0,2*Math.PI)):(a.moveTo(i[0].x,i[0].y),"curve"===e.extra.lineStyle?i.forEach(function(t,e){if(e>0){var n=createCurveControlPoints(i,e-1);a.bezierCurveTo(n.ctrA.x,n.ctrA.y,n.ctrB.x,n.ctrB.y,t.x,t.y)}}):i.forEach(function(t,e){e>0&&a.lineTo(t.x,t.y)}),a.moveTo(i[0].x,i[0].y)),a.closePath(),a.stroke()}),!1!==e.dataPointShape){var f=i.dataPointShape[o%i.dataPointShape.length];drawPointShape(s,t.color,f,a)}}),!1!==e.dataLabel&&1===n&&t.forEach(function(t,o){drawPointText(getDataPoints(t.data,c,d,l,h,e,i,n),t,i,a)}),e.tooltip&&e.tooltip.textList&&e.tooltip.textList.length&&1===n&&drawToolTip(e.tooltip.textList,e.tooltip.offset,e,i,a),{xAxisPoints:l,calPoints:x}}function drawXAxis(t,e,i,a){var n=getXAxisPoints(t,e,i),o=n.xAxisPoints,r=n.startX,s=n.endX,l=n.eachSpacing,h=e.height-i.padding-i.xAxisHeight-i.legendHeight,c=h+i.xAxisLineHeight;a.beginPath(),a.setStrokeStyle(e.xAxis.gridColor||"#cccccc"),a.setLineWidth(1),a.moveTo(r,h),a.lineTo(s,h),!0!==e.xAxis.disableGrid&&("calibration"===e.xAxis.type?o.forEach(function(t,e){e>0&&(a.moveTo(t-l/2,h),a.lineTo(t-l/2,h+4))}):o.forEach(function(t,e){a.moveTo(t,h),a.lineTo(t,c)})),a.closePath(),a.stroke();var d=e.width-2*i.padding-i.yAxisWidth-i.yAxisTitleWidth,x=Math.min(t.length,Math.ceil(d/i.fontSize/1.5)),f=Math.ceil(t.length/x);t=t.map(function(t,e){return e%f!=0?"":t}),0===i._xAxisTextAngle_?(a.beginPath(),a.setFontSize(i.fontSize),a.setFillStyle(e.xAxis.fontColor||"#666666"),t.forEach(function(t,e){var n=l/2-measureText(t)/2;a.fillText(t,o[e]+n,h+i.fontSize+5)}),a.closePath(),a.stroke()):t.forEach(function(t,n){a.save(),a.beginPath(),a.setFontSize(i.fontSize),a.setFillStyle(e.xAxis.fontColor||"#666666");var r=measureText(t),s=l/2-r,c=calRotateTranslate(o[n]+l/2,h+i.fontSize/2+5,e.height),d=c.transX,x=c.transY;a.rotate(-1*i._xAxisTextAngle_),a.translate(d,x),a.fillText(t,o[n]+s,h+i.fontSize+5),a.closePath(),a.stroke(),a.restore()})}function drawYAxis(t,e,i,a){if(!0!==e.yAxis.disabled){for(var n=calYAxisData(t,e,i),o=n.rangesFormat,r=i.yAxisWidth+i.yAxisTitleWidth,s=e.height-2*i.padding-i.xAxisHeight-i.legendHeight,l=Math.floor(s/i.yAxisSplit),h=i.padding+r,c=e.width-i.padding,d=(i.padding,e.height-i.padding-i.xAxisHeight-i.legendHeight),x=[],f=0;f4&&void 0!==arguments[4]?arguments[4]:1;t=getPieDataPoints(t,n);var o={x:e.width/2,y:(e.height-i.legendHeight)/2},r=Math.min(o.x-i.pieChartLinePadding-i.pieChartTextPadding-i._pieTextMaxLength_,o.y-i.pieChartLinePadding-i.pieChartTextPadding);if(e.dataLabel?r-=10:r-=2*i.padding,t.forEach(function(t){a.beginPath(),a.setLineWidth(1),a.setStrokeStyle("#ffffff"),a.setFillStyle(t.color),a.moveTo(o.x,o.y),a.arc(o.x,o.y,r,t._start_,t._start_+2*t._proportion_*Math.PI),a.closePath(),a.fill(),!0!==e.disablePieStroke&&a.stroke()}),"ring"===e.type){var s=.6*r;"number"==typeof e.extra.ringWidth&&e.extra.ringWidth>0&&(s=Math.max(0,r-e.extra.ringWidth)),a.beginPath(),a.setFillStyle("#111c24"),a.moveTo(o.x,o.y),a.arc(o.x,o.y,s,0,2*Math.PI),a.closePath(),a.fill()}return!1!==e.dataLabel&&1===n&&drawPieText(t,e,i,a,r,o),1===n&&"ring"===e.type&&drawRingTitle(e,i,a),{center:o,radius:r,series:t}}function drawRadarDataPoints(t,e,i,a){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,o=e.extra.radar||{},r=getRadarCoordinateSeries(e.categories.length),s={x:e.width/2,y:(e.height-i.legendHeight)/2},l=Math.min(s.x-(getMaxTextListLength(e.categories)+i.radarLabelTextMargin),s.y-i.radarLabelTextMargin);l-=i.padding,a.beginPath(),a.setLineWidth(1),a.setStrokeStyle(o.gridColor||"#cccccc"),r.forEach(function(t){var e=convertCoordinateOrigin(l*Math.cos(t),l*Math.sin(t),s);a.moveTo(s.x,s.y),a.lineTo(e.x,e.y)}),a.stroke(),a.closePath();for(var h=1;h<=i.radarGridCount;h++)!function(t){var e={};a.beginPath(),a.setLineWidth(1),a.setStrokeStyle(o.gridColor||"#cccccc"),r.forEach(function(n,o){var r=convertCoordinateOrigin(l/i.radarGridCount*t*Math.cos(n),l/i.radarGridCount*t*Math.sin(n),s);0===o?(e=r,a.moveTo(r.x,r.y)):a.lineTo(r.x,r.y)}),a.lineTo(e.x,e.y),a.stroke(),a.closePath()}(h);return getRadarDataPoints(r,s,l,t,e,n).forEach(function(t,n){if(a.beginPath(),a.setFillStyle(t.color),a.setGlobalAlpha(.6),t.data.forEach(function(t,e){0===e?a.moveTo(t.position.x,t.position.y):a.lineTo(t.position.x,t.position.y)}),a.closePath(),a.fill(),a.setGlobalAlpha(1),!1!==e.dataPointShape){var o=i.dataPointShape[n%i.dataPointShape.length];drawPointShape(t.data.map(function(t){return t.position}),t.color,o,a)}}),drawRadarLabel(r,l,s,e,i,a),{center:s,radius:l,angleList:r}}function drawCanvas(t,e){e.draw()}function Animation(t){this.isStop=!1,t.duration=void 0===t.duration?1e3:t.duration,t.timing=t.timing||"linear";var e=function(){return"undefined"!=typeof requestAnimationFrame?requestAnimationFrame:"undefined"!=typeof setTimeout?function(t,e){setTimeout(function(){var e=+new Date;t(e)},e)}:function(t){t(null)}}(),i=null,a=function(n){if(null===n||!0===this.isStop)return t.onProcess&&t.onProcess(1),void(t.onAnimationFinish&&t.onAnimationFinish());if(null===i&&(i=n),n-it.end.x||e.end.xt.start.y||e.start.y0&&void 0!==arguments[0]?arguments[0]:{};this.opts.series=t.series||this.opts.series,this.opts.categories=t.categories||this.opts.categories,this.opts.title=assign({},this.opts.title,t.title||{}),this.opts.subtitle=assign({},this.opts.subtitle,t.subtitle||{}),drawCharts.call(this,this.opts.type,this.opts,this.config,this.context)},Charts.prototype.stopAnimation=function(){this.animationInstance&&this.animationInstance.stop()},Charts.prototype.addEventListener=function(t,e){this.event.addEventListener(t,e)},Charts.prototype.getCurrentDataIndex=function(t){if(t.touches&&t.touches.length){var e=t.touches[0],i=e.x,a=e.y;return"pie"===this.opts.type||"ring"===this.opts.type?findPieChartCurrentIndex({x:i,y:a},this.chartData.pieData):"radar"===this.opts.type?findRadarChartCurrentIndex({x:i,y:a},this.chartData.radarData,this.opts.categories.length):findCurrentIndex({x:i,y:a},this.chartData.xAxisPoints,this.opts,this.config)}return-1},Charts.prototype.showToolTip=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if("line"===this.opts.type||"area"===this.opts.type||"column"===this.opts.type){var i=this.getCurrentDataIndex(t),a=assign({},this.opts,{animation:!1});if(i>-1){var n=getSeriesDataItem(this.opts.series,i);if(0===n.length)drawCharts.call(this,a.type,a,this.config,this.context);else{var o=getToolTipData(n,this.chartData.calPoints,i),r=o.textList,s=o.offset;a.tooltip={textList:r,offset:s,option:e},drawCharts.call(this,a.type,a,this.config,this.context)}}else drawCharts.call(this,a.type,a,this.config,this.context)}},module.exports=Charts; diff --git a/dist/wxcharts.js b/dist/wxcharts.js index 27548a3..bd90074 100644 --- a/dist/wxcharts.js +++ b/dist/wxcharts.js @@ -20,7 +20,7 @@ var config = { columePadding: 3, fontSize: 10, dataPointShape: ['diamond', 'circle', 'triangle', 'rect'], - colors: ['#7cb5ec', '#f7a35c', '#434348', '#90ed7d', '#f15c80', '#8085e9'], + colors: ['#266a99', '#fa9a00', 'green', '#ce1d31', '#73d2fd', '#8085e9'], pieChartLinePadding: 25, pieChartTextPadding: 15, xAxisTextPadding: 3, @@ -346,40 +346,38 @@ function findRadarChartCurrentIndex(currentPoints, radarData, count) { var eachAngleArea = 2 * Math.PI / count; var currentIndex = -1; if (isInExactPieChartArea(currentPoints, radarData.center, radarData.radius)) { - (function () { - var fixAngle = function fixAngle(angle) { - if (angle < 0) { - angle += 2 * Math.PI; - } - if (angle > 2 * Math.PI) { - angle -= 2 * Math.PI; - } - return angle; - }; - - var angle = Math.atan2(radarData.center.y - currentPoints.y, currentPoints.x - radarData.center.x); - angle = -1 * angle; + var fixAngle = function fixAngle(angle) { if (angle < 0) { angle += 2 * Math.PI; } + if (angle > 2 * Math.PI) { + angle -= 2 * Math.PI; + } + return angle; + }; - var angleList = radarData.angleList.map(function (item) { - item = fixAngle(-1 * item); + var angle = Math.atan2(radarData.center.y - currentPoints.y, currentPoints.x - radarData.center.x); + angle = -1 * angle; + if (angle < 0) { + angle += 2 * Math.PI; + } - return item; - }); + var angleList = radarData.angleList.map(function (item) { + item = fixAngle(-1 * item); - angleList.forEach(function (item, index) { - var rangeStart = fixAngle(item - eachAngleArea / 2); - var rangeEnd = fixAngle(item + eachAngleArea / 2); - if (rangeEnd < rangeStart) { - rangeEnd += 2 * Math.PI; - } - if (angle >= rangeStart && angle <= rangeEnd || angle + 2 * Math.PI >= rangeStart && angle + 2 * Math.PI <= rangeEnd) { - currentIndex = index; - } - }); - })(); + return item; + }); + + angleList.forEach(function (item, index) { + var rangeStart = fixAngle(item - eachAngleArea / 2); + var rangeEnd = fixAngle(item + eachAngleArea / 2); + if (rangeEnd < rangeStart) { + rangeEnd += 2 * Math.PI; + } + if (angle >= rangeStart && angle <= rangeEnd || angle + 2 * Math.PI >= rangeStart && angle + 2 * Math.PI <= rangeEnd) { + currentIndex = index; + } + }); } return currentIndex; @@ -388,18 +386,16 @@ function findRadarChartCurrentIndex(currentPoints, radarData, count) { function findPieChartCurrentIndex(currentPoints, pieData) { var currentIndex = -1; if (isInExactPieChartArea(currentPoints, pieData.center, pieData.radius)) { - (function () { - var angle = Math.atan2(pieData.center.y - currentPoints.y, currentPoints.x - pieData.center.x); - if (angle < 0) { - angle += 2 * Math.PI; + var angle = Math.atan2(pieData.center.y - currentPoints.y, currentPoints.x - pieData.center.x); + if (angle < 0) { + angle += 2 * Math.PI; + } + angle = 2 * Math.PI - angle; + pieData.series.forEach(function (item, index) { + if (angle > item._start_) { + currentIndex = index; } - angle = 2 * Math.PI - angle; - pieData.series.forEach(function (item, index) { - if (angle > item._start_) { - currentIndex = index; - } - }); - })(); + }); } return currentIndex; @@ -983,7 +979,17 @@ function drawYAxisTitle(title, opts, config, context) { context.closePath(); context.restore(); } - +function dashedLineTodashedLineTo(context, x, y, startX, startY, dashLength) { + dashLength = dashLength === 0 || dashLength === undefined ? dashLength = 5 : dashLength = dashLength; + //这个this就是context哈 + + //线段数量 + var dashNum = Math.floor(Math.sqrt(Math.pow(startX - x, 2) + Math.pow(startY - y, 2)) / dashLength); + for (var i = 0; i < dashNum; i++) { + context[i % 2 === 0 ? "moveTo" : "lineTo"](startX + i * (x - startX) / dashNum, startY + i * (y - startY) / dashNum); + } + context.stroke(); +} function drawColumnDataPoints(series, opts, config, context) { var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; @@ -997,11 +1003,13 @@ function drawColumnDataPoints(series, opts, config, context) { var minRange = ranges.pop(); var maxRange = ranges.shift(); var endY = opts.height - config.padding - config.xAxisHeight - config.legendHeight; + var calPoints = []; series.forEach(function (eachSeries, seriesIndex) { var data = eachSeries.data; var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts); + calPoints.push(points); // 绘制柱状数据图 context.beginPath(); @@ -1025,8 +1033,10 @@ function drawColumnDataPoints(series, opts, config, context) { drawPointText(points, eachSeries, config, context); } }); - - return xAxisPoints; + if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) { + drawToolTip(opts.tooltip.textList, opts.tooltip.offset, opts, config, context); + } + return { xAxisPoints: xAxisPoints, calPoints: calPoints }; } function drawAreaDataPoints(series, opts, config, context) { @@ -1299,7 +1309,11 @@ function drawYAxis(series, opts, config, context) { context.setLineWidth(1); points.forEach(function (item, index) { context.moveTo(startX, item); - context.lineTo(endX, item); + if (opts.yAxis.lineType === 'dashed') { + dashedLineTodashedLineTo(context, endX, item, startX, item); + } else { + context.lineTo(endX, item); + } }); context.closePath(); context.stroke(); @@ -1407,7 +1421,7 @@ function drawPieDataPoints(series, opts, config, context) { } series.forEach(function (eachSeries) { context.beginPath(); - context.setLineWidth(2); + context.setLineWidth(1); context.setStrokeStyle('#ffffff'); context.setFillStyle(eachSeries.color); context.moveTo(centerPosition.x, centerPosition.y); @@ -1425,7 +1439,7 @@ function drawPieDataPoints(series, opts, config, context) { innerPieWidth = Math.max(0, radius - opts.extra.ringWidth); } context.beginPath(); - context.setFillStyle('#ffffff'); + context.setFillStyle('#111c24'); context.moveTo(centerPosition.x, centerPosition.y); context.arc(centerPosition.x, centerPosition.y, innerPieWidth, 0, 2 * Math.PI); context.closePath(); @@ -1675,7 +1689,13 @@ function drawCharts(type, opts, config, context) { onProcess: function onProcess(process) { drawYAxis(series, opts, config, context); drawXAxis(categories, opts, config, context); - _this.chartData.xAxisPoints = drawColumnDataPoints(series, opts, config, context, process); + + var _drawColumnDataPoints = drawColumnDataPoints(series, opts, config, context, process), + xAxisPoints = _drawColumnDataPoints.xAxisPoints, + calPoints = _drawColumnDataPoints.calPoints; + + _this.chartData.xAxisPoints = xAxisPoints; + _this.chartData.calPoints = calPoints; drawLegend(opts.series, opts, config, context); drawCanvas(opts, context); }, @@ -1831,7 +1851,7 @@ Charts.prototype.getCurrentDataIndex = function (e) { Charts.prototype.showToolTip = function (e) { var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - if (this.opts.type === 'line' || this.opts.type === 'area') { + if (this.opts.type === 'line' || this.opts.type === 'area' || this.opts.type === 'column') { var index = this.getCurrentDataIndex(e); var opts = assign({}, this.opts, { animation: false }); if (index > -1) { diff --git a/package.json b/package.json index d182d71..cbde489 100644 --- a/package.json +++ b/package.json @@ -7,11 +7,14 @@ "devDependencies": { "babel-plugin-external-helpers": "^6.18.0", "babel-preset-es2015": "^6.18.0", + "rollup": "^0.41.6", "rollup-plugin-babel": "^2.6.1", - "rollup-plugin-uglify": "^1.0.1" + "rollup-plugin-uglify": "^1.0.1", + "rollup-watch": "^3.2.2" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", + "start": "rollup -c --watch", "build": "rollup -c && rollup --config rollup.config.prod.js" }, "repository": { diff --git a/src/app.js b/src/app.js index 1b62059..787105b 100644 --- a/src/app.js +++ b/src/app.js @@ -3,7 +3,6 @@ import { assign } from './util/polyfill/index'; import drawCharts from './components/draw-charts'; import Event from './util/event'; import { findCurrentIndex, findRadarChartCurrentIndex, findPieChartCurrentIndex, getSeriesDataItem, getToolTipData } from './components/charts-data' - let Charts = function(opts) { opts.title = opts.title || {}; opts.subtitle = opts.subtitle || {}; @@ -61,7 +60,7 @@ Charts.prototype.getCurrentDataIndex = function (e) { } Charts.prototype.showToolTip = function (e, option = {}) { - if (this.opts.type === 'line' || this.opts.type === 'area') { + if (this.opts.type === 'line' || this.opts.type === 'area' || this.opts.type === 'column') { let index = this.getCurrentDataIndex(e); let opts = assign({}, this.opts, {animation: false}); if (index > -1) { diff --git a/src/components/draw-charts.js b/src/components/draw-charts.js index eb046b4..1ee107d 100644 --- a/src/components/draw-charts.js +++ b/src/components/draw-charts.js @@ -50,7 +50,9 @@ export default function drawCharts (type, opts, config, context) { onProcess: (process) => { drawYAxis(series, opts, config, context); drawXAxis(categories, opts, config, context); - this.chartData.xAxisPoints = drawColumnDataPoints(series, opts, config, context, process); + let { xAxisPoints, calPoints } = drawColumnDataPoints(series, opts, config, context, process); + this.chartData.xAxisPoints = xAxisPoints; + this.chartData.calPoints = calPoints; drawLegend(opts.series, opts, config, context); drawCanvas(opts, context); }, diff --git a/src/components/draw.js b/src/components/draw.js index 210d1f1..3749b7f 100644 --- a/src/components/draw.js +++ b/src/components/draw.js @@ -1,11 +1,22 @@ -import { getRadarDataPoints, getRadarCoordinateSeries, getMaxTextListLength, splitPoints, getPieDataPoints, calYAxisData, getXAxisPoints, getDataPoints, fixColumeData, calLegendData } from './charts-data' -import { convertCoordinateOrigin, measureText, calRotateTranslate, createCurveControlPoints } from './charts-util' +import { + getRadarDataPoints, + getRadarCoordinateSeries, + getMaxTextListLength, + splitPoints, + getPieDataPoints, + calYAxisData, + getXAxisPoints, + getDataPoints, + fixColumeData, + calLegendData +} from './charts-data' +import {convertCoordinateOrigin, measureText, calRotateTranslate, createCurveControlPoints} from './charts-util' import Util from '../util/util' import drawPointShape from './draw-data-shape' -import { drawPointText, drawPieText, drawRingTitle, drawRadarLabel } from './draw-data-text' -import { drawToolTip, drawToolTipSplitLine } from './draw-tooltip' +import {drawPointText, drawPieText, drawRingTitle, drawRadarLabel} from './draw-data-text' +import {drawToolTip, drawToolTipSplitLine} from './draw-tooltip' -function drawYAxisTitle (title, opts, config, context) { +function drawYAxisTitle(title, opts, config, context) { let startX = config.xAxisHeight + (opts.height - config.xAxisHeight - measureText(title)) / 2; context.save(); context.beginPath(); @@ -18,24 +29,37 @@ function drawYAxisTitle (title, opts, config, context) { context.closePath(); context.restore(); } - -export function drawColumnDataPoints (series, opts, config, context, process = 1) { - let { ranges } = calYAxisData(series, opts, config); - let { xAxisPoints, eachSpacing } = getXAxisPoints(opts.categories, opts, config); +function dashedLineTodashedLineTo(context, x, y,startX,startY, dashLength) { + dashLength = dashLength === 0 || dashLength === undefined ? + dashLength = 5 : dashLength = dashLength; + //这个this就是context哈 + + //线段数量 + var dashNum = Math.floor(Math.sqrt(Math.pow(startX - x, 2) + Math.pow(startY - y, 2)) / dashLength); + for (var i = 0; i < dashNum; i++) { + context[i % 2 === 0 ? "moveTo" : "lineTo"](startX + i * (x - startX) / dashNum, startY + i * (y - startY) / dashNum); + } + context.stroke(); +}; +export function drawColumnDataPoints(series, opts, config, context, process = 1) { + let {ranges} = calYAxisData(series, opts, config); + let {xAxisPoints, eachSpacing} = getXAxisPoints(opts.categories, opts, config); let minRange = ranges.pop(); let maxRange = ranges.shift(); let endY = opts.height - config.padding - config.xAxisHeight - config.legendHeight; + let calPoints = []; - series.forEach(function(eachSeries, seriesIndex) { + series.forEach(function (eachSeries, seriesIndex) { let data = eachSeries.data; let points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts); + calPoints.push(points) // 绘制柱状数据图 context.beginPath(); context.setFillStyle(eachSeries.color); - points.forEach(function(item, index) { - if (item !== null) { + points.forEach(function (item, index) { + if (item !== null) { let startX = item.x - item.width / 2 + 1; let height = opts.height - item.y - config.padding - config.xAxisHeight - config.legendHeight; context.moveTo(startX, item.y); @@ -45,7 +69,7 @@ export function drawColumnDataPoints (series, opts, config, context, process = 1 context.closePath(); context.fill(); }); - series.forEach(function(eachSeries, seriesIndex) { + series.forEach(function (eachSeries, seriesIndex) { let data = eachSeries.data; let points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts); @@ -53,13 +77,15 @@ export function drawColumnDataPoints (series, opts, config, context, process = 1 drawPointText(points, eachSeries, config, context); } }); - - return xAxisPoints; + if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) { + drawToolTip(opts.tooltip.textList, opts.tooltip.offset, opts, config, context); + } + return {xAxisPoints,calPoints}; } -export function drawAreaDataPoints (series, opts, config, context, process = 1) { - let { ranges } = calYAxisData(series, opts, config); - let { xAxisPoints, eachSpacing } = getXAxisPoints(opts.categories, opts, config); +export function drawAreaDataPoints(series, opts, config, context, process = 1) { + let {ranges} = calYAxisData(series, opts, config); + let {xAxisPoints, eachSpacing} = getXAxisPoints(opts.categories, opts, config); let minRange = ranges.pop(); let maxRange = ranges.shift(); let endY = opts.height - config.padding - config.xAxisHeight - config.legendHeight; @@ -69,7 +95,7 @@ export function drawAreaDataPoints (series, opts, config, context, process = 1) drawToolTipSplitLine(opts.tooltip.offset.x, opts, config, context); } - series.forEach(function(eachSeries, seriesIndex) { + series.forEach(function (eachSeries, seriesIndex) { let data = eachSeries.data; let points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); calPoints.push(points); @@ -86,17 +112,17 @@ export function drawAreaDataPoints (series, opts, config, context, process = 1) if (points.length > 1) { let firstPoint = points[0]; let lastPoint = points[points.length - 1]; - + context.moveTo(firstPoint.x, firstPoint.y); if (opts.extra.lineStyle === 'curve') { - points.forEach(function(item, index) { + points.forEach(function (item, index) { if (index > 0) { let ctrlPoint = createCurveControlPoints(points, index - 1); - context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x,ctrlPoint.ctrB.y, item.x, item.y); + context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y); } }); } else { - points.forEach(function(item, index) { + points.forEach(function (item, index) { if (index > 0) { context.lineTo(item.x, item.y); } @@ -119,13 +145,13 @@ export function drawAreaDataPoints (series, opts, config, context, process = 1) context.setGlobalAlpha(1); }); - if (opts.dataPointShape !== false) { + if (opts.dataPointShape !== false) { let shape = config.dataPointShape[seriesIndex % config.dataPointShape.length]; drawPointShape(points, eachSeries.color, shape, context); } }); if (opts.dataLabel !== false && process === 1) { - series.forEach(function(eachSeries, seriesIndex) { + series.forEach(function (eachSeries, seriesIndex) { let data = eachSeries.data; let points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); drawPointText(points, eachSeries, config, context); @@ -142,9 +168,9 @@ export function drawAreaDataPoints (series, opts, config, context, process = 1) }; } -export function drawLineDataPoints (series, opts, config, context, process = 1) { - let { ranges } = calYAxisData(series, opts, config); - let { xAxisPoints, eachSpacing } = getXAxisPoints(opts.categories, opts, config); +export function drawLineDataPoints(series, opts, config, context, process = 1) { + let {ranges} = calYAxisData(series, opts, config); + let {xAxisPoints, eachSpacing} = getXAxisPoints(opts.categories, opts, config); let minRange = ranges.pop(); let maxRange = ranges.shift(); let calPoints = []; @@ -153,7 +179,7 @@ export function drawLineDataPoints (series, opts, config, context, process = 1) drawToolTipSplitLine(opts.tooltip.offset.x, opts, config, context); } - series.forEach(function(eachSeries, seriesIndex) { + series.forEach(function (eachSeries, seriesIndex) { let data = eachSeries.data; let points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); calPoints.push(points); @@ -169,14 +195,14 @@ export function drawLineDataPoints (series, opts, config, context, process = 1) } else { context.moveTo(points[0].x, points[0].y); if (opts.extra.lineStyle === 'curve') { - points.forEach(function(item, index) { + points.forEach(function (item, index) { if (index > 0) { let ctrlPoint = createCurveControlPoints(points, index - 1); - context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x,ctrlPoint.ctrB.y, item.x, item.y); + context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y); } }); } else { - points.forEach(function(item, index) { + points.forEach(function (item, index) { if (index > 0) { context.lineTo(item.x, item.y); } @@ -188,13 +214,13 @@ export function drawLineDataPoints (series, opts, config, context, process = 1) context.stroke(); }); - if (opts.dataPointShape !== false) { + if (opts.dataPointShape !== false) { let shape = config.dataPointShape[seriesIndex % config.dataPointShape.length]; drawPointShape(points, eachSeries.color, shape, context); } }); if (opts.dataLabel !== false && process === 1) { - series.forEach(function(eachSeries, seriesIndex) { + series.forEach(function (eachSeries, seriesIndex) { let data = eachSeries.data; let points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); drawPointText(points, eachSeries, config, context); @@ -211,8 +237,8 @@ export function drawLineDataPoints (series, opts, config, context, process = 1) }; } -export function drawXAxis (categories, opts, config, context) { - let { xAxisPoints, startX, endX, eachSpacing } = getXAxisPoints(categories, opts, config); +export function drawXAxis(categories, opts, config, context) { + let {xAxisPoints, startX, endX, eachSpacing} = getXAxisPoints(categories, opts, config); let startY = opts.height - config.padding - config.xAxisHeight - config.legendHeight; let endY = startY + config.xAxisLineHeight; @@ -223,14 +249,14 @@ export function drawXAxis (categories, opts, config, context) { context.lineTo(endX, startY); if (opts.xAxis.disableGrid !== true) { if (opts.xAxis.type === 'calibration') { - xAxisPoints.forEach(function(item, index) { - if (index > 0) { + xAxisPoints.forEach(function (item, index) { + if (index > 0) { context.moveTo(item - eachSpacing / 2, startY); context.lineTo(item - eachSpacing / 2, startY + 4); } }); } else { - xAxisPoints.forEach(function(item, index) { + xAxisPoints.forEach(function (item, index) { context.moveTo(item, startY); context.lineTo(item, endY); }); @@ -252,21 +278,21 @@ export function drawXAxis (categories, opts, config, context) { context.beginPath(); context.setFontSize(config.fontSize); context.setFillStyle(opts.xAxis.fontColor || '#666666'); - categories.forEach(function(item, index) { + categories.forEach(function (item, index) { let offset = eachSpacing / 2 - measureText(item) / 2; context.fillText(item, xAxisPoints[index] + offset, startY + config.fontSize + 5); }); context.closePath(); context.stroke(); } else { - categories.forEach(function(item, index) { + categories.forEach(function (item, index) { context.save(); context.beginPath(); context.setFontSize(config.fontSize); context.setFillStyle(opts.xAxis.fontColor || '#666666'); let textWidth = measureText(item); let offset = eachSpacing / 2 - textWidth; - let { transX, transY } = calRotateTranslate(xAxisPoints[index] + eachSpacing / 2, startY + config.fontSize / 2 + 5, opts.height); + let {transX, transY} = calRotateTranslate(xAxisPoints[index] + eachSpacing / 2, startY + config.fontSize / 2 + 5, opts.height); context.rotate(-1 * config._xAxisTextAngle_); context.translate(transX, transY); context.fillText(item, xAxisPoints[index] + offset, startY + config.fontSize + 5); @@ -277,11 +303,11 @@ export function drawXAxis (categories, opts, config, context) { } } -export function drawYAxis (series, opts, config, context) { +export function drawYAxis(series, opts, config, context) { if (opts.yAxis.disabled === true) { return; } - let { rangesFormat } = calYAxisData(series, opts, config); + let {rangesFormat} = calYAxisData(series, opts, config); let yAxisTotalWidth = config.yAxisWidth + config.yAxisTitleWidth; let spacingValid = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight; @@ -299,28 +325,32 @@ export function drawYAxis (series, opts, config, context) { context.beginPath(); context.setStrokeStyle(opts.yAxis.gridColor || "#cccccc") context.setLineWidth(1); - points.forEach(function(item, index) { + points.forEach(function (item, index) { context.moveTo(startX, item); - context.lineTo(endX, item); + if(opts.yAxis.lineType==='dashed'){ + dashedLineTodashedLineTo(context,endX, item,startX, item); + } else{ + context.lineTo(endX, item); + } }); context.closePath(); context.stroke(); context.beginPath(); context.setFontSize(config.fontSize); context.setFillStyle(opts.yAxis.fontColor || '#666666') - rangesFormat.forEach(function(item, index) { + rangesFormat.forEach(function (item, index) { let pos = points[index] ? points[index] : endY; context.fillText(item, config.padding + config.yAxisTitleWidth, pos + config.fontSize / 2); }); context.closePath(); context.stroke(); - if (opts.yAxis.title) { + if (opts.yAxis.title) { drawYAxisTitle(opts.yAxis.title, opts, config, context); } } -export function drawLegend (series, opts, config, context) { +export function drawLegend(series, opts, config, context) { if (!opts.legend) { return; } @@ -328,7 +358,7 @@ export function drawLegend (series, opts, config, context) { // the spacing between shape and text in each legend is the `padding` // each legend spacing is the `padding` // legend margin top `config.padding` - let { legendList, legendHeight } = calLegendData(series, opts, config); + let {legendList, legendHeight} = calLegendData(series, opts, config); let padding = 5; let marginTop = 8; let shapeWidth = 15; @@ -385,11 +415,11 @@ export function drawLegend (series, opts, config, context) { context.fillText(item.name, startX, startY + 9); context.closePath(); context.stroke(); - startX += measureText(item.name) + 2 * padding; + startX += measureText(item.name) + 2 * padding; }); }); } -export function drawPieDataPoints (series, opts, config, context, process = 1) { +export function drawPieDataPoints(series, opts, config, context, process = 1) { series = getPieDataPoints(series, process); let centerPosition = { x: opts.width / 2, @@ -404,16 +434,16 @@ export function drawPieDataPoints (series, opts, config, context, process = 1) { } else { radius -= 2 * config.padding; } - series.forEach(function(eachSeries) { + series.forEach(function (eachSeries) { context.beginPath(); - context.setLineWidth(2); + context.setLineWidth(1); context.setStrokeStyle('#ffffff'); context.setFillStyle(eachSeries.color); context.moveTo(centerPosition.x, centerPosition.y); context.arc(centerPosition.x, centerPosition.y, radius, eachSeries._start_, eachSeries._start_ + 2 * eachSeries._proportion_ * Math.PI); context.closePath(); context.fill(); - if (opts.disablePieStroke !== true) { + if (opts.disablePieStroke !== true) { context.stroke(); } }); @@ -424,7 +454,7 @@ export function drawPieDataPoints (series, opts, config, context, process = 1) { innerPieWidth = Math.max(0, radius - opts.extra.ringWidth); } context.beginPath(); - context.setFillStyle('#ffffff'); + context.setFillStyle('#111c24'); context.moveTo(centerPosition.x, centerPosition.y); context.arc(centerPosition.x, centerPosition.y, innerPieWidth, 0, 2 * Math.PI); context.closePath(); @@ -446,8 +476,8 @@ export function drawPieDataPoints (series, opts, config, context, process = 1) { } } -export function drawRadarDataPoints (series, opts, config, context, process = 1) { - let radarOption = opts.extra.radar || {}; +export function drawRadarDataPoints(series, opts, config, context, process = 1) { + let radarOption = opts.extra.radar || {}; let coordinateAngle = getRadarCoordinateSeries(opts.categories.length); let centerPosition = { x: opts.width / 2, @@ -484,7 +514,7 @@ export function drawRadarDataPoints (series, opts, config, context, process = 1) if (index === 0) { startPos = pos; context.moveTo(pos.x, pos.y); - } else { + } else { context.lineTo(pos.x, pos.y); } }); @@ -500,7 +530,7 @@ export function drawRadarDataPoints (series, opts, config, context, process = 1) context.setFillStyle(eachSeries.color); context.setGlobalAlpha(0.6); eachSeries.data.forEach((item, index) => { - if (index === 0) { + if (index === 0) { context.moveTo(item.position.x, item.position.y); } else { context.lineTo(item.position.x, item.position.y); @@ -510,7 +540,7 @@ export function drawRadarDataPoints (series, opts, config, context, process = 1) context.fill(); context.setGlobalAlpha(1); - if (opts.dataPointShape !== false) { + if (opts.dataPointShape !== false) { let shape = config.dataPointShape[seriesIndex % config.dataPointShape.length]; let points = eachSeries.data.map(item => { return item.position; @@ -528,6 +558,6 @@ export function drawRadarDataPoints (series, opts, config, context, process = 1) } } -export function drawCanvas (opts, context) { +export function drawCanvas(opts, context) { context.draw(); } \ No newline at end of file diff --git a/src/config.js b/src/config.js index 54f6955..b26403a 100644 --- a/src/config.js +++ b/src/config.js @@ -9,7 +9,7 @@ const config = { columePadding: 3, fontSize: 10, dataPointShape: ['diamond', 'circle', 'triangle', 'rect'], - colors: ['#7cb5ec', '#f7a35c', '#434348', '#90ed7d', '#f15c80', '#8085e9'], + colors: ['#266a99', '#fa9a00', 'green', '#ce1d31', '#73d2fd', '#8085e9'], pieChartLinePadding: 25, pieChartTextPadding: 15, xAxisTextPadding: 3,