Lösungen ,Chars grafiken

Chars_grafiken.php

Quell Code

<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ChartUp</title>

<link rel="stylesheet" href="./index/icon/css/font-awesome.min.css">
<style>

* {
  padding: 0;
  margin: 0;
  color: inherit;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  color: #282b36;
  border-top: 8px solid #282b36;
  
}
canvas {
  font-family: "proxima-nova", sans-serif sans-serif;
}
.redBorder,
.greenBorder,
.yellowBorder {
  width: 33.33%;
  float: left;
  height: 8px;
}
.redBorder {
  background-color: #f33e6f;
}
.greenBorder {
  background-color: #46bfbd;
}
.yellowBorder {
  background-color: #fdb45c;
}
h1 {
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
  font-size: 55px;
  margin-top: 40px;
}
h2 {
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
  margin-top: 20px;
  font-size: 26px;
  line-height: 40px;
}
h3 {
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
  text-align: center;
  margin: 20px 0;
}
h3 a {
  color: #2d91ea;
  text-decoration: none;
  border-bottom: 1px solid #2d91ea;
}
p {
  font-family: "proxima-nova", sans-serif;
  line-height: 24px;
  font-size: 18px;
  color: #767c8d;
}
.btn {
  margin-top: 20px;
  display: inline-block;
  padding: 20px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
  font-size: 18px;
  transition-property: background-color box-shadow;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
}
.btn:active {
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
}
.btn.red {
  background-color: #f33e6f;
}
.btn.red:hover {
  background-color: #f2265d;
}
.btn.blue {
  background-color: #2d91ea;
}
.btn.blue:hover {
  background-color: #1785e6;
}

section {
display:flex;
flex-wrap:wrap;
}
section:before {
  content: '';
  width: 70%;
  margin: 0 auto;
  border-top: 1px solid #ebebeb;
  height: 20px;
  display: block;
}
section:after {
  content: "";
  display: table;
  clear: both;
}
*section {
  zoom: 1;
}
#features article {
  width: 33.33%;
  float: left;
}



article p {
  display: block;
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

.chartUp-container {
    width: 50%;
    min-height: 400px;
	float: left;
}




#examples article:after {
  content: '';
  width: 70%;
  padding-top: 0;
  margin: 0 auto;
  border-bottom: 1px solid #ebebeb;
  height: 20px;
  display: block;
  clear: both;
}




#examples article p {
  margin-top: 10px;
}
#examples article .half {
  width: 50%;
  float: left;
}
#examples article .canvasWrapper {
  float: left;
  width: 449px;
  padding: 0 20px;
}
#examples h3 {
  clear: both;
}
#examples .hidden {
  opacity: 0;
}





.chartUp-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 20px;
}

.chartUp-container > h2 {
    padding: 0; 
    margin: 0; 
    text-align: center; 
    color: #333; 
    font-weight: 100;
}

.chartUp-container > .comment {
    padding-right: 50px;
    font-size: 12px;
    text-align: right;
    color: #666;
    width: 100%;
}

.chartUp-container > canvas {
    flex: auto 1 1;
}

.chartUp-container > .tag-con {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    box-sizing: border-box;
    list-style: none;
    padding: 0 30px 20px 30px;
    margin-top: 20px;
    min-height: 80px;
}

.chartUp-container > .tag-con > li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding: 8px 16px 8px 16px;
    color: #333;
    margin: 8px; 
    border-radius: 4px;
    cursor: pointer;
    height: 40px;
    user-select: none;
}

.chartUp-container > .tag-con > .active {
    color: #ddd;
}

.chartUp-container > .tag-con > .active > .tag {
    background-color: #ddd !important;
}

.chartUp-container > .tag-con > li > .tag {
    width: 14px;
    height: 14px;
    border-radius: 7px;
    margin-right: 8px;
}



#features i {
    font-size: 100px;
}

.chartUp-container {
	width: 50%;
	min-height: 400px;
	float: left;
}


button {
	margin-right: 16px;
	border-radius: 5px;
	color: #fff;
	padding: 12px 25px 12px 25px;
	border: none;
	outline: none;
	cursor: pointer;
}

.addItem {
	background-color: #f33e6f;
}

.removeItem {
	background-color: #2d91ea;
}

article{
    border:1px solid grey;
    width: 48vw;
    margin: auto;
  transition: opacity 200ms ease-in-out;
}
</style>

</head>

<body>
<section id="examples">
		<article><div id="BaseChart" class="chartUp-container"><h2>BaseChart</h2></div></article>
		<article><div id="LineChart" class="chartUp-container"><h2>LineChart</h2></div></article>
		<article><div id="PillarChart" class="chartUp-container"><h2>PillarChart</h2></div></article>
		<article><div id="PointChart" class="chartUp-container"><h2>PointChart</h2></div></article>
		<article><div id="AreaChart" class="chartUp-container"><h2>AreaChart</h2></div></article>
		<article><div id="PieChart" class="chartUp-container"><h2>PieChart</h2></div></article>
		<article><div id="AnnularChart" class="chartUp-container"><h2>AnnularChart</h2></div></article>
		<article><div id="PolarChart" class="chartUp-container"><h2>PolarChart</h2></div></article>
		<article><div id="RadarChart" class="chartUp-container"><h2>RadarChart</h2></div></article>
</section>
<input type="button" class="addItem" value="www">
<input type="button" class="removeItem" value="www">
<script>
    'use strict';

/*
* - ChartUp -
* version: 0.0.2
* A javascript library for building visual data. From phenom.
* start on 11.9.2017
*/
var __extends = undefined && undefined.__extends || function () {
    var extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function (d, b) {
        d.__proto__ = b;
    } || function (d, b) {
        for (var p in b) {
            if (b.hasOwnProperty(p)) d[p] = b[p];
        }
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() {
            this.constructor = d;
        }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
}();
// ------------ MAIN ------------ //
/*
* ??Chart???
*/
var ChartUp = function (window) {
    //????
    var _Gconfig = {
        //????????
        defaultColor: '#000',
        //????????????
        edge: [20, 20],
        showLabel: true
    };
    //??????
    var _degree2Radian = function _degree2Radian(degree) {
        return Math.PI * (degree / 180);
    };
    //?????????
    var _MAX = function _MAX(arr) {
        return Math.max.apply(Math, arr);
    };
    //?????????
    var _MIN = function _MIN(arr) {
        return Math.min.apply(Math, arr);
    };
    //????
    var _SUM = function _SUM(arr) {
        return arr.length ? arr.reduce(function (prev, cur, index, arr) {
            return prev + cur;
        }) : 0;
    };
    /*---------------------------ChartUp??------------------------------- */
    var ChartPrototype = /** @class */function () {
        //entrance
        function ChartPrototype() {
            //????????
            this.fn = {};
            this.tempValue = {};
            //version
            this.version = '0.0.2';
            //????API
            this.configuration = _Gconfig;
            this.fn = {
                //????????DrawLine????
                drawLine: function drawLine(Graphics, x, y, color) {
                    return new DrawLine(Graphics, x, y, color);
                },
                //?????????DrawArc????
                DrawArc: function DrawArc(Graphics, radius, angle, isSoild) {
                    if (isSoild === void 0) {
                        isSoild = true;
                    }
                    return new _DrawArc(Graphics, radius, angle, isSoild);
                },
                //?????????DrawRect????
                DrawRect: function DrawRect(Graphics, width, height, isFill) {
                    if (isFill === void 0) {
                        isFill = true;
                    }
                    return new _DrawRect(Graphics, width, height, true);
                },
                //?????
                animate: _Animate
            };
        }
        ChartPrototype.prototype.changeItem = function (el, config) {
            var label = el.getAttribute('data-item'),
                ritem = null,
                index = 0;
            config.items.map(function (item, i) {
                if (item.label === label) {
                    index = i;
                    ritem = item;
                }
            });
            //??      
            if (el.className.indexOf('active') > -1) {
                el.classList.remove('active');
                config.itemList.push(label);
                _chartAnimation(ritem, 'set', function () {}, config.chartIntance, this.tempValue[label]);
            } else {
                if (ritem.value instanceof Array) {
                    if (ritem.value[0] instanceof Array) {
                        this.tempValue[ritem.label] = ritem.value.map(function (v) {
                            return v.slice(0);
                        });
                    } else {
                        this.tempValue[ritem.label] = ritem.value.slice(0);
                    }
                } else {
                    this.tempValue[ritem.label] = ritem.value;
                }
                el.classList.add('active');
                _chartAnimation(ritem, 'remove', function () {
                    config.itemList.splice(config.itemList.indexOf(label), 1);
                    config.chartIntance.setRenderOption(config.chartIntance.config.itemList).render();
                }, config.chartIntance);
            }
        };
        //??????
        ChartPrototype.prototype.createTagItem = function (container, item, config) {
            if (!_Gconfig.showLabel) {
                return false;
            }
            var tagItem = document.createElement('li'),
                tag = document.createElement('span'),
                labelText = document.createElement('span');
            var _self = this;
            tagItem.setAttribute('data-item', item.label);
            tag.classList.add('tag');
            tag.style.backgroundColor = item.color;
            labelText.classList.add('label');
            labelText.innerHTML = item.label;
            tagItem.appendChild(tag);
            tagItem.appendChild(labelText);
            //????????
            tagItem.addEventListener('click', function (e) {
                _self.changeItem(this, config);
            });
            container.appendChild(tagItem);
        };
        //??????
        ChartPrototype.prototype.destoryTagItem = function (container, label) {
            var targetEle = null;
            if (label) {
                [].slice.call(container.children).map(function (tag) {
                    if (tag.querySelector('.label').innerHTML === label) {
                        targetEle = tag;
                    }
                });
            } else {
                targetEle = container.children[container.children.length - 1];
            }
            targetEle && container.removeChild(targetEle);
        };
        //?????????????
        ChartPrototype.prototype.addCondition = function (container, config) {
            var _this = this;
            var title = document.createElement('h2'),
                canvas = document.createElement('canvas'),
                tagCon = document.createElement('ul'),
                comment = document.createElement('div');
            container.classList.add('chartUp-container');
            comment.classList.add('comment');
            title.innerHTML = config.title ? config.title : '';
            comment.innerHTML = config.comment ? config.comment : '';
            tagCon.classList.add('tag-con');
            config.items.map(function (item) {
                _this.createTagItem(tagCon, item, config);
            });
            container.appendChild(title);
            container.appendChild(comment);
            container.appendChild(canvas);
            container.appendChild(tagCon);
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
            config.canvas = canvas;
            config.tagCon = tagCon;
            //??canvas??????
            config.canvasWidth = canvas.offsetWidth;
            config.canvasHeight = canvas.offsetHeight;
            return canvas.getContext('2d');
        };
        ChartPrototype.prototype.config = function (c) {
            this.configuration = Object.assign(this.configuration, c);
        };
        /*
        * @extend: ????
        * @parameter: chartConfig
        *
        * ??:
        * 1.chartType: ???????????
        * 2.chartConfig: ????????????
        */
        ChartPrototype.prototype.extend = function (chartConfig) {
            if (!chartConfig.chartType) {
                console.warn("'chartType' option is required.");
                return false;
            }
            if (!chartConfig.chartClass) {
                console.warn("'chartClass' option is required.");
                return false;
            }
            this[chartConfig.chartType] = function (container, config) {
                var con = document.querySelector(container);
                if (!con) {
                    return false;
                }
                var Graphics = this.addCondition(con, config);
                //????
                config.chartType = chartConfig.chartType;
                config.itemList = config.items.map(function (item) {
                    return item.label;
                });
                //??????
                config.chartIntance = new chartConfig.chartClass(Graphics, config).init(config.itemList);
                return config.chartIntance;
            };
        };
        return ChartPrototype;
    }();
    //???Chart
    var ChartUp = new ChartPrototype();
    /*--------------------????---------------------*/
    /*
    * @DrawLine: ?canvas??api?????
    * reLine: ?????????????
    * next: ??????
    * end: ???????
    * paint: ????
    */
    var DrawLine = /** @class */function () {
        function DrawLine(g, x, y, color) {
            this.g = null;
            this.currentPoint = [];
            this.color = '';
            this.g = g;
            this.color = color;
            this.color && (this.g.strokeStyle = this.color);
            //??????
            this.g.beginPath();
            //????
            this.g.moveTo(x, y);
            this.currentPoint = [x, y];
        }
        DrawLine.prototype.reLine = function (color) {
            this.color = color;
            this.g.stroke();
            this.g.strokeStyle = this.color;
            this.g.beginPath();
            this.g.moveTo(this.currentPoint[0], this.currentPoint[1]);
        };
        DrawLine.prototype.next = function (x, y, color) {
            if (color) {
                this.reLine(color);
            }
            ;
            this.g.lineTo(x, y);
            this.currentPoint = [x, y];
            return this;
        };
        DrawLine.prototype.paint = function (shape) {
            //????
            this.g.stroke();
            //??????
            shape.render(this.currentPoint[0], this.currentPoint[1], this.color);
            //??????
            this.g.beginPath();
            this.g.moveTo(this.currentPoint[0], this.currentPoint[1]);
            return this;
        };
        DrawLine.prototype.end = function (x, y, isFill, color) {
            if (isFill === void 0) {
                isFill = false;
            }
            if (color) {
                this.reLine(color);
            }
            ;
            isFill && (this.g.fillStyle = color);
            this.g.lineTo(x, y);
            this.currentPoint = [x, y];
            isFill ? this.g.fill() : this.g.stroke();
            return this;
        };
        return DrawLine;
    }();
    /*
    * @DrawArc: ?canvas??api?????
    * render: ??????????????
    */
    var _DrawArc = /** @class */function () {
        function DrawArc(g, radius, angle, soild) {
            if (soild === void 0) {
                soild = true;
            }
            this.g = null;
            this.radius = 0;
            this.startAngle = 0;
            this.endAngle = 0;
            this.isSoild = true;
            this.x = 0;
            this.y = 0;
            this.isDrawCircle = false;
            this.g = g;
            this.radius = radius;
            this.startAngle = 0;
            this.endAngle = _degree2Radian(angle);
            this.isSoild = soild;
            angle === 360 && (this.isDrawCircle = true);
        }
        DrawArc.prototype.next = function (angle, color) {
            this.startAngle = this.endAngle;
            this.endAngle = this.endAngle + _degree2Radian(angle);
            this.render(this.x, this.y, color);
            return this;
        };
        DrawArc.prototype.render = function (x, y, color) {
            this.x = x;
            this.y = y;
            if (color) {
                this.isSoild ? this.g.fillStyle = color : this.g.strokeStyle = color;
            }
            this.g.beginPath();
            !this.isDrawCircle && this.g.moveTo(this.x, this.y);
            this.g.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle);
            this.g.closePath();
            this.isSoild ? this.g.fill() : this.g.stroke();
            return this;
        };
        return DrawArc;
    }();
    /*
    * @DrawArc: ?canvas??api?????
    * render: ??????????????
    */
    var _DrawRect = /** @class */function () {
        function DrawRect(g, width, height, soild) {
            if (soild === void 0) {
                soild = true;
            }
            this.g = null;
            this.width = 0;
            this.height = 0;
            this.isSoild = true;
            this.g = g;
            this.isSoild = soild;
            this.width = width;
            this.height = height;
        }
        DrawRect.prototype.render = function (x, y, color) {
            if (color) {
                this.isSoild ? this.g.fillStyle = color : this.g.strokeStyle = color;
            }
            this.g.beginPath();
            this.g.rect(x, y, this.width, this.height);
            this.isSoild ? this.g.fill() : this.g.stroke();
        };
        return DrawRect;
    }();
    /*
    * @DrawCoordinateSystem: ???????
    * rightAngle: ????????x?y??
    * setIntervalPoint: ???x?y??????
    * CoordinateSystemText: ????????
    * calculator: ????????????????????
    * render: ????
    */
    var DrawCoordinateSystem = /** @class */function () {
        function DrawCoordinateSystem(g, config, items) {
            this.g = null;
            this.config = null;
            this.items = [];
            //??????canvas?????
            this.margin = 45;
            //????
            this.oX = 0;
            this.oY = 0;
            //?????
            this.xOrigin = 0;
            this.yOrigin = 0;
            //????????
            this.lX = 0;
            this.lY = 0;
            //???x?y???
            this.xEdge = 0;
            this.yEdge = 0;
            //?????x, y???
            this.rxEdge = 0;
            this.ryEdge = 0;
            //??????
            this.rxIntervals = [];
            this.ryIntervals = [];
            //???????
            this.xIntervals = [];
            this.yIntervals = [];
            this.xCount = 0;
            this.yCount = 0;
            this.xInterval = 0;
            this.yInterval = 0;
            this.g = g;
            this.config = config;
            this.items = items;
            this.oX = this.margin;
            this.oY = this.config.canvasHeight - this.margin;
            this.lX = this.config.canvasWidth - this.oX - 20 - this.margin;
            this.lY = this.oY - 20;
            this.rxEdge = this.oX + this.lX;
            this.ryEdge = this.oY - this.lY;
            this.xInterval = this.config.interval[0] ? this.config.interval[0] : 1, this.yInterval = this.config.interval[1] ? this.config.interval[1] : this.config.interval;
            var xMax = this.getMax(this.items, 'x'),
                yMax = this.getMax(this.items, 'y'),
                xMin = Math.ceil(this.getMin(this.items, 'x')),
                yMin = Math.ceil(this.getMin(this.items, 'y'));
            this.xOrigin = xMin, this.yOrigin = yMin;
            var xLength = xMax - this.xOrigin,
                yLength = yMax - this.yOrigin;
            this.xCount = Math.floor(xLength / this.xInterval) + 1, this.yCount = Math.floor(yLength / this.yInterval) + 1;
            this.xEdge = this.xInterval * this.xCount + this.xOrigin, this.yEdge = this.yInterval * this.yCount + this.yOrigin;
            for (var i = 1; i <= this.xCount; i++) {
                //????????????
                var index = i * (this.lX / this.xCount);
                //??????????
                this.rxIntervals.push(this.oX + index);
                this.yIntervals.push(i * this.xInterval + this.xOrigin);
            }
            for (var i = 1; i <= this.yCount; i++) {
                //????????????
                var index = i * (this.lY / this.yCount);
                //??????????
                this.ryIntervals.push(this.oY - index);
                this.yIntervals.push(i * this.yInterval + this.yOrigin);
            }
        }
        //??x=0?
        DrawCoordinateSystem.prototype.baseLineX = function () {
            var y = this.calc(0, 0)['y'],
                start = this.calc(this.xOrigin, 0)['x'];
            this.g.save();
            if (this.yOrigin < 0) {
                new DrawLine(this.g, start, y, '#666').end(this.rxEdge, y);
            }
            this.g.restore();
            return this;
        };
        //??y=0?
        DrawCoordinateSystem.prototype.baseLineY = function () {
            var x = this.calc(0, 0)['x'],
                start = this.calc(0, this.yOrigin)['y'];
            this.g.save();
            if (this.xOrigin < 0) {
                new DrawLine(this.g, x, start, '#666').end(x, this.ryEdge);
            }
            this.g.restore();
            return this;
        };
        DrawCoordinateSystem.prototype.rightAngle = function () {
            new DrawLine(this.g, this.margin, 0).next(this.oX, this.oY).end(this.config.canvasWidth - this.margin, this.oY);
            return this;
        };
        DrawCoordinateSystem.prototype.setXIntervalPoint = function () {
            //??????
            this.coordinateSystemText("(" + this.xOrigin + ", " + this.yOrigin + ")", this.oX, this.oY + 15);
            //???X????
            for (var i = 1; i <= this.xCount; i++) {
                //????????????
                var index = i * (this.lX / this.xCount);
                //??????????
                new DrawLine(this.g, this.oX + index, this.oY).end(this.oX + index, this.oY + 5);
                //???
                this.coordinateSystemText(i * this.xInterval + this.xOrigin, this.oX + index, this.oY + 15);
            }
            return this;
        };
        DrawCoordinateSystem.prototype.setYIntervalPoint = function () {
            //???y????
            for (var i = 1; i <= this.yCount; i++) {
                //????????????
                var index = i * (this.lY / this.yCount);
                //??????????
                new DrawLine(this.g, this.oX - 5, this.oY - index).end(this.oX, this.oY - index);
                //???
                this.coordinateSystemText(i * this.yInterval + this.yOrigin, this.oX - 15, this.oY - index);
            }
            return this;
        };
        //???????????
        DrawCoordinateSystem.prototype.coordinateSystemText = function (text, x, y) {
            this.g.save();
            this.g.textAlign = 'center';
            this.g.textBaseline = 'middle';
            this.g.fillText(text, x, y);
            this.g.restore();
        };
        //????????????????????
        DrawCoordinateSystem.prototype.calc = function (x, y) {
            return {
                x: this.oX + (x - this.xOrigin) * this.lX / (this.xEdge - this.xOrigin),
                y: this.oY - (y - this.yOrigin) * this.lY / (this.yEdge - this.yOrigin)
            };
        };
        //?????????
        DrawCoordinateSystem.prototype.getMax = function (items, dir) {
            var flag = dir === 'x' ? 0 : 1;
            if (items.length === 0) {
                return _Gconfig.edge[flag];
            }
            if (this.config.chartType === 'BaseChart' || this.config.chartType === 'PointChart') {
                //??items?????
                return _MAX(items.map(function (item) {
                    if (typeof item.value === 'function') {
                        return _Gconfig.edge[flag];
                    } else {
                        return _MAX(item.value.map(function (p) {
                            return p[flag];
                        }));
                    }
                }));
            } else if (this.config.chartType === 'AreaChart') {
                var temp = [],
                    sum = 0;
                for (var i = 0; i < this.config.length; i++) {
                    for (var j = 0; j < this.items.length; j++) {
                        sum = this.items[j].value[i] + sum;
                    }
                    temp.push(sum);
                    sum = 0;
                }
                return _MAX(temp);
            } else {
                return _MAX(this.items.map(function (item) {
                    return _MAX(item.value);
                }));
            }
        };
        //?????????
        DrawCoordinateSystem.prototype.getMin = function (items, dir) {
            var _this = this;
            var flag = dir === 'x' ? 0 : 1;
            if (items.length === 0) {
                return 0;
            }
            //??????????x????????y?
            if (this.config.chartType === 'BaseChart' || this.config.chartType === 'PointChart') {
                //??items?????
                return _MIN(items.map(function (item) {
                    if (typeof item.value === 'function') {
                        return 0;
                    } else {
                        return Math.ceil(_MIN(item.value.map(function (p) {
                            return p[flag];
                        }))) - _this.config.interval[flag];
                    }
                }));
            } else if (this.config.chartType === 'AreaChart') {
                return _MIN(items[0].value);
            } else {
                var min = _MIN(this.items.map(function (item) {
                    return _MIN(item.value);
                }));
                return min > 0 ? 0 : min - Math.abs(min);
            }
        };
        return DrawCoordinateSystem;
    }();
    /*
    * @DrawRadarSystem: ???????
    */
    var DrawRadarSystem = /** @class */function () {
        function DrawRadarSystem(g, config, items) {
            this.g = null;
            this.config = null;
            this.items = null;
            this.oX = 0;
            this.oY = 0;
            this.angleList = [];
            //????????
            this.edge = 0;
            this.max = 0;
            this.count = 0;
            this.g = g;
            this.config = config;
            this.items = items;
            this.oX = this.config.centerX;
            this.oY = this.config.centerY;
            this.max = this.getMax(this.items);
            this.count = Math.floor(this.max / this.config.interval) + 1;
            this.edge = this.count * this.config.interval;
        }
        //??????????
        DrawRadarSystem.prototype.getAngleValue = function (index, radius) {
            var _this = this;
            var angleList = [],
                curAngle = 0,
                angle = 2 * Math.PI / index.length,
                pi2 = Math.PI / 2;
            index.map(function (t, i) {
                curAngle = i * angle;
                angleList.push({
                    x: _this.oX + radius * Math.cos(curAngle + pi2),
                    y: _this.oY + radius * Math.sin(curAngle + pi2)
                });
            });
            return angleList;
        };
        //???????
        DrawRadarSystem.prototype.drawPolygon = function () {
            var angleList = [],
                radius = 0,
                line = null;
            for (var j = 0; j < this.count; j++) {
                radius = (this.edge - j * this.config.interval) * this.config.defaultRadius / this.edge;
                angleList = this.getAngleValue(this.config.index, radius);
                for (var i = 0; i < angleList.length; i++) {
                    if (i === angleList.length - 1) {
                        line = line.next(angleList[i].x, angleList[i].y).end(angleList[0].x, angleList[0].y);
                    } else if (i === 0) {
                        line = new DrawLine(this.g, angleList[i].x, angleList[i].y, '#ddd');
                    } else {
                        line = line.next(angleList[i].x, angleList[i].y);
                    }
                }
                if (j === 0) {
                    this.angleList = angleList;
                }
            }
            return this;
        };
        //?????????
        DrawRadarSystem.prototype.fillPolygon = function () {
            var angleList = [],
                radius = 0,
                line = null;
            this.g.save();
            for (var j = 0; j < this.count; j++) {
                radius = (this.edge - j * this.config.interval) * this.config.defaultRadius / this.edge;
                angleList = this.getAngleValue(this.config.index, radius);
                this.g.fillStyle = j % 2 ? '#eee' : '#fff';
                for (var i = 0; i < angleList.length; i++) {
                    if (i === angleList.length - 1) {
                        line = line.next(angleList[i].x, angleList[i].y).end(angleList[0].x, angleList[0].y, j > 0 ? true : false);
                    } else if (i === 0) {
                        line = new DrawLine(this.g, angleList[i].x, angleList[i].y, '#ddd');
                    } else {
                        line = line.next(angleList[i].x, angleList[i].y);
                    }
                }
            }
            this.g.restore();
            return this;
        };
        //?????
        DrawRadarSystem.prototype.drawRay = function () {
            var _this = this;
            this.angleList.map(function (a) {
                new DrawLine(_this.g, _this.oX, _this.oY, '#ddd').end(a.x, a.y);
            });
            return this;
        };
        //??????
        DrawRadarSystem.prototype.drawText = function () {
            var _this = this;
            var margin = 20;
            this.g.save();
            this.g.textAlign = 'center';
            this.angleList.map(function (a, i) {
                var x = a.x,
                    y = a.y;
                if (a.x > _this.oX) {
                    x = a.x + margin;
                }
                if (a.x < _this.oX) {
                    x = a.x - margin;
                }
                if (a.y > _this.oY) {
                    y = a.y + margin;
                }
                if (a.y < _this.oY) {
                    y = a.y - margin;
                }
                _this.g.fillText(_this.config.index[i], x, y);
            });
            this.g.restore();
            return this;
        };
        DrawRadarSystem.prototype.getMax = function (items) {
            if (items.length === 0) {
                return _Gconfig.edge[0];
            }
            return _MAX(items.map(function (item) {
                return _MAX(item.value);
            }));
        };
        DrawRadarSystem.prototype.calc = function (v, index) {
            var curAngle = index * (2 * Math.PI / this.config.index.length),
                radius = v * this.config.defaultRadius / this.edge,
                pi2 = Math.PI / 2;
            return {
                x: this.oX + radius * Math.cos(curAngle + pi2),
                y: this.oY + radius * Math.sin(curAngle + pi2)
            };
        };
        DrawRadarSystem.prototype.render = function () {
            this.fillPolygon().drawPolygon().drawRay().drawText();
        };
        return DrawRadarSystem;
    }();
    /*
    * @DrawRadarSystem: ???????
    */
    var DrawPolarSystem = /** @class */function () {
        function DrawPolarSystem(g, config, items) {
            this.g = null;
            this.config = null;
            this.items = null;
            this.oX = 0;
            this.oY = 0;
            //????????
            this.edge = 0;
            this.max = 0;
            this.count = 0;
            this.g = g;
            this.config = config;
            this.items = items;
            this.oX = this.config.canvasWidth / 2;
            this.oY = this.config.canvasHeight / 2;
            this.max = this.getMax(this.items);
            this.count = Math.floor(this.max / this.config.interval) + 2;
            this.edge = this.count * this.config.interval;
        }
        DrawPolarSystem.prototype.getMax = function (items) {
            return items.length ? _MAX(items.map(function (item) {
                return item.value;
            })) : 60;
        };
        DrawPolarSystem.prototype.drawPolarNet = function () {
            var radius = 0;
            for (var i = 0; i < this.count; i++) {
                radius = (this.edge - i * this.config.interval) * this.config.defaultRadius / this.edge;
                new _DrawArc(this.g, radius, 360, false).render(this.oX, this.oY, '#ddd');
            }
            return this;
        };
        DrawPolarSystem.prototype.drawText = function () {
            var radius = 0;
            this.g.save();
            this.g.font = '12px serif';
            for (var i = 0; i < this.count; i++) {
                this.g.fillStyle = 'rgba(255, 255, 255, 0.5)';
                radius = (this.edge - i * this.config.interval) * this.config.defaultRadius / this.edge;
                this.g.fillRect(this.oX - 15, this.oY - radius - 10, 30, 20);
                this.g.fillStyle = '#666';
                this.g.textAlign = 'center';
                this.g.textBaseline = 'middle';
                this.g.fillText(this.edge - i * this.config.interval, this.oX, this.oY - radius);
            }
            this.g.restore();
            return this;
        };
        DrawPolarSystem.prototype.calc = function (v) {
            return v * this.config.defaultRadius / this.edge;
        };
        DrawPolarSystem.prototype.render = function () {
            this.drawPolarNet().drawText();
        };
        return DrawPolarSystem;
    }();
    /*
    * @Animate: canvas????????
    */
    //????? ????????
    var isAnimating = false;
    var _Animate = function _Animate(option, durfn, callBack) {
        var aniID = null;
        var loop = function loop() {
            var stop = true;
            isAnimating = true;
            option.map(function (op, i) {
                var speed = op[1] > op[0] ? Math.ceil((op[1] - op[0]) / 5) : Math.floor((op[1] - op[0]) / 5);
                op[0] += speed;
                durfn(speed, i);
                if (op[0] !== op[1]) {
                    stop = false;
                }
            });
            if (stop) {
                window.cancelAnimationFrame(aniID);
                isAnimating = false;
                callBack();
            } else {
                aniID = window.requestAnimationFrame(loop);
            }
        };
        loop();
    };
    //????
    var _chartAnimation = function _chartAnimation(item, type, callBack, chart, value) {
        var target = 0,
            optionList = [];
        if (chart.config.chartType === 'BaseChart' || chart.config.chartType === 'PointChart') {
            callBack();
            chart.setRenderOption(chart.config.itemList).render();
            return false;
        }
        if (item.value instanceof Array) {
            if (item.value[0] instanceof Array) {
                if (type === 'remove') {
                    optionList = Array.from(new Array(item.value.length), function (op, i) {
                        return [Math.floor(item.value[i][1]), chart.origin];
                    });
                }
                if (type === 'add') {
                    optionList = Array.from(new Array(item.value.length), function (op, i) {
                        target = Math.floor(item.value[i][1]);
                        item.value[i][1] = chart.origin;
                        return [chart.origin, target];
                    });
                }
                if (type === 'set') {
                    optionList = Array.from(new Array(item.value.length), function (op, i) {
                        return [Math.floor(item.value[i][1]), Math.floor(value[i][1])];
                    });
                }
                _Animate(optionList, function (s, i) {
                    item.value[i][1] += s;
                    chart.setRenderOption(chart.config.itemList).render();
                }, callBack);
            } else {
                if (type === 'remove') {
                    optionList = Array.from(new Array(item.value.length), function (op, i) {
                        return [Math.floor(item.value[i]), chart.origin];
                    });
                }
                if (type === 'add') {
                    optionList = Array.from(new Array(item.value.length), function (op, i) {
                        target = Math.floor(item.value[i]);
                        item.value[i] = chart.origin;
                        return [chart.origin, target];
                    });
                }
                if (type === 'set') {
                    optionList = Array.from(new Array(item.value.length), function (op, i) {
                        return [Math.floor(item.value[i]), Math.floor(value[i])];
                    });
                }
                _Animate(optionList, function (s, i) {
                    item.value[i] += s;
                    chart.setRenderOption(chart.config.itemList).render();
                }, callBack);
            }
        } else {
            if (type === 'remove') {
                optionList = [[Math.floor(item.value), chart.origin]];
            }
            if (type === 'add') {
                target = Math.floor(item.value);
                item.value = chart.origin;
                optionList = [[Math.floor(item.value), target]];
            }
            if (type === 'set') {
                optionList = Array.from(new Array(item.value.length), function (op, i) {
                    return [Math.floor(item.value), Math.floor(value)];
                });
            }
            _Animate(optionList, function (s, i) {
                item.value += s;
                chart.setRenderOption(chart.config.itemList).render();
            }, callBack);
        }
    };
    /*--------------------???? END-------------------------*/
    /*------------------------------???------------------------------------ */
    /*
    * @InitialChart: ?????????????????????
    */
    var InitialChart = /** @class */function () {
        function InitialChart(Graphics, config) {
            this.g = null;
            this.config = null;
            this.data = [];
            this.items = [];
            this.coordinateSystem = null;
            this.radarSystem = null;
            this.polarSystem = null;
            this.origin = 0;
            this.g = Graphics;
            this.config = config;
            if (!this.config.items) {
                console.warn("'items' option is required.");
                return null;
            }
            if (this.config.chartType !== 'PieChart' && this.config.chartType !== 'AnnularChart') {
                if (this.config.interval === undefined) {
                    console.warn("'interval' option is required.");
                    return null;
                }
            }
            //??????
            this.config.grid = this.config.grid === undefined ? true : this.config.grid;
            //???????
            this.config.measureLine = this.config.measureLine === undefined ? true : this.config.measureLine;
            //??????
            this.bindMouseEvent();
            this.indexItem(this.config.items);
        }
        InitialChart.prototype.analyseItems = function (item, index) {};
        ;
        //?????????
        InitialChart.prototype.bindMouseEvent = function () {
            var _this = this;
            this.config.canvas.addEventListener('mousemove', function (e) {
                var x = e.clientX - _this.config.canvas.getBoundingClientRect().left,
                    y = e.clientY - _this.config.canvas.getBoundingClientRect().top;
                _this.g.clearRect(0, 0, _this.config.canvasWidth, _this.config.canvasHeight);
                _this.reRender(x, y);
            });
            return this;
        };
        //????????????????
        /*
        * @parameter:
        * data: ????analyseItems??????????
        */
        InitialChart.prototype.renderResult = function (data) {};
        ;
        //?????
        /*
        * @parameter:
        * x: ?????
        * y: ?????
        * flag: ????????????
        */
        InitialChart.prototype.paintTipCase = function (x, y, flag) {};
        ;
        //??????????
        /*
        * @parameter:
        * x: ?????
        * y: ?????
        * data: ????analyseItems??????????
        */
        InitialChart.prototype.mouseSelect = function (data, x, y) {};
        ;
        //???????
        // protected sortItem(items) {
        // 	items.sort((item1, item2) => item1.value - item2.value);
        // 	return this;
        // }
        //??????????
        InitialChart.prototype.indexItem = function (items) {
            items.map(function (item, index) {
                item.index = index;
            });
            return this;
        };
        //???????????????????????????????????????????????????????????????????
        /*
        * @parameter:
        * x: ?????
        * y: ?????
        */
        InitialChart.prototype.reRender = function (x, y) {};
        ;
        //??
        InitialChart.prototype.render = function () {
            var _this = this;
            this.g.clearRect(0, 0, this.config.canvasWidth, this.config.canvasHeight);
            //??items????
            this.items.map(function (item, index) {
                _this.data.push({
                    ele: _this.analyseItems(item, index),
                    color: item.color,
                    label: item.label
                });
            });
            this.reRender(0, 0);
            return this;
        };
        //??
        InitialChart.prototype.setRenderOption = function (itemList) {
            var _this = this;
            this.items = [];
            this.data = [];
            itemList.map(function (label) {
                _this.config.items.map(function (item) {
                    if (item.label === label) {
                        _this.items.push(item);
                    }
                });
            });
            this.items.sort(function (i1, i2) {
                return i1.index - i2.index;
            });
            /*
            * @DrawCoordinateSystem: ?????
            * ?????????????
            * ??????
            * ????
            * ??????
            */
            if (this.coordinateSystem) {
                this.coordinateSystem = new DrawCoordinateSystem(this.g, this.config, this.items);
                this.origin = this.coordinateSystem.yOrigin;
            }
            if (this.radarSystem) {
                this.radarSystem = new DrawRadarSystem(this.g, this.config, this.items);
            }
            if (this.polarSystem) {
                this.polarSystem = new DrawPolarSystem(this.g, this.config, this.items);
            }
            if (this.config.chartType === 'PieChart' || this.config.chartType === 'AnnularChart') {
                //this.sortItem(this.items);
            }
            return this;
        };
        InitialChart.prototype.init = function (itemList) {
            //?????
            this.setRenderOption(itemList).render();
            return this;
        };
        InitialChart.prototype.addItem = function (item) {
            this.config.items.push(item);
            this.config.itemList.push(item.label);
            ChartUp.createTagItem(this.config.tagCon, item, this.config);
            _chartAnimation(item, 'add', function () {}, this);
        };
        ;
        InitialChart.prototype.removeItem = function (label) {
            var index = 0,
                ritem = null;
            if (isAnimating) {
                return false;
            }
            if (!this.config.items.length) {
                return false;
            }
            if (!label) {
                ritem = this.config.items[this.config.items.length - 1];
                index = this.config.items.length - 1;
            } else {
                this.config.items.map(function (item, i) {
                    if (item.label === label) {
                        index = i;
                        ritem = item;
                    }
                });
            }
            var delCallback = function delCallback() {
                this.config.items.splice(index, 1);
                if (this.config.itemList.indexOf(ritem.label) > -1) {
                    this.config.itemList.splice(this.config.itemList.indexOf(ritem.label), 1);
                }
                this.setRenderOption(this.config.itemList).render();
                ChartUp.destoryTagItem(this.config.tagCon, label);
            };
            _chartAnimation(ritem, 'remove', delCallback.bind(this), this);
        };
        InitialChart.prototype.setItem = function (label, value) {
            var item = this.config.items[this.config.items.map(function (item) {
                return item.label;
            }).indexOf(label)];
            _chartAnimation(item, 'set', function () {}, this, value);
        };
        return InitialChart;
    }();
    /*
    * @BaseChart: ????
    *
    * ???
    * ???????????????????
    *
    * ???
    * render: ????
    * drawCoordinateSystem: ?????
    * drawGrid: ??
    * renderResult: ????
    */
    var BaseChart = /** @class */function (_super) {
        __extends(BaseChart, _super);
        function BaseChart(Graphics, config) {
            var _this = _super.call(this, Graphics, config) || this;
            //????
            _this.defaultRadius = 3;
            _this.coordinateSystem = true;
            //??????
            if (_this.config.defaultRadius) {
                _this.defaultRadius = _this.config.defaultRadius;
            }
            return _this;
        }
        BaseChart.prototype.reRender = function (x, y) {
            this.g.save();
            //?????
            this.paintGrid().drawCoordinateSystem().renderResult(this.data).paintTargetLineX(x, y).paintTargetLineY(x, y).paintTipCase(x, y, this.mouseSelect(this.data, x, y));
            this.g.restore();
        };
        //????
        BaseChart.prototype.paintGrid = function () {
            this.g.save();
            this.config.grid && this.drawGridX().drawGridY();
            this.g.restore();
            return this;
        };
        //?????
        BaseChart.prototype.drawCoordinateSystem = function () {
            this.coordinateSystem.rightAngle().setXIntervalPoint().setYIntervalPoint().baseLineX().baseLineY();
            return this;
        };
        //??????
        BaseChart.prototype.drawGridX = function () {
            var xLength = this.coordinateSystem.rxIntervals.length,
                topBoundary = this.coordinateSystem.ryEdge;
            //??????????
            for (var i = 0; i < xLength; i++) {
                new DrawLine(this.g, this.coordinateSystem.rxIntervals[i], this.coordinateSystem.oY, '#eee').end(this.coordinateSystem.rxIntervals[i], topBoundary);
            }
            return this;
        };
        //??????
        BaseChart.prototype.drawGridY = function () {
            var yLength = this.coordinateSystem.ryIntervals.length,
                rightBoundary = this.coordinateSystem.rxEdge;
            //??????????
            for (var i = 0; i < yLength; i++) {
                new DrawLine(this.g, this.coordinateSystem.oX, this.coordinateSystem.ryIntervals[i], '#eee').end(rightBoundary, this.coordinateSystem.ryIntervals[i]);
            }
            return this;
        };
        //??????????
        BaseChart.prototype.isInChart = function (x, y) {
            return x > this.coordinateSystem.oX && x < this.coordinateSystem.rxEdge && y < this.coordinateSystem.oY && y > this.coordinateSystem.ryEdge;
        };
        //????????
        BaseChart.prototype.mouseSelect = function (circles, x, y) {
            var _this = this;
            //???????????????????
            var flag = null;
            circles.map(function (cir) {
                if (typeof cir.ele !== 'function') {
                    cir.ele.map(function (c) {
                        _this.g.beginPath();
                        _this.g.arc(c.x, c.y, c.r + 2, 0, 2 * Math.PI);
                        if (_this.g.isPointInPath(x, y)) {
                            _this.g.save();
                            _this.g.shadowOffsetX = 1;
                            _this.g.shadowOffsetY = 1;
                            _this.g.shadowBlur = 2;
                            _this.g.shadowColor = "rgba(0, 0, 0, 0.5)";
                            _this.g.fillStyle = cir.color;
                            _this.g.fill();
                            _this.g.restore();
                            flag = c;
                        }
                    });
                }
            });
            return flag;
        };
        //???????
        BaseChart.prototype.paintTargetLineY = function (x, y) {
            var vy = this.coordinateSystem.yOrigin + Math.abs(y - this.config.canvasHeight + 45) * (this.coordinateSystem.yEdge - this.coordinateSystem.yOrigin) / this.coordinateSystem.lY;
            this.g.save();
            this.g.setLineDash([4, 2]);
            if (this.isInChart(x, y)) {
                if (this.config.measureLine) {
                    new DrawLine(this.g, this.coordinateSystem.oX, y, 'rgba(0, 0, 0, 0.2)').end(this.coordinateSystem.rxEdge, y);
                    this.g.fillStyle = 'rgba(0, 0, 0, 0.7)';
                    this.g.rect(this.coordinateSystem.oX + 5, y - 21, 70, 18);
                    this.g.fill();
                    this.g.font = '12px serif';
                    this.g.fillStyle = '#fff';
                    this.g.fillText("y: " + vy.toFixed(3), this.coordinateSystem.oX + 10, y - 9);
                }
            }
            this.g.restore();
            return this;
        };
        //???????
        BaseChart.prototype.paintTargetLineX = function (x, y) {
            var vx = this.coordinateSystem.xOrigin + (x - 45) * (this.coordinateSystem.xEdge - this.coordinateSystem.xOrigin) / this.coordinateSystem.lX;
            this.g.save();
            this.g.setLineDash([4, 2]);
            if (this.isInChart(x, y)) {
                if (this.config.measureLine) {
                    new DrawLine(this.g, x, this.coordinateSystem.ryEdge, 'rgba(0, 0, 0, 0.2)').end(x, this.coordinateSystem.oY);
                    this.g.fillStyle = 'rgba(0, 0, 0, 0.7)';
                    this.g.rect(x + 5, this.coordinateSystem.oY - 21, 70, 18);
                    this.g.fill();
                    this.g.font = '12px serif';
                    this.g.fillStyle = '#fff';
                    this.g.fillText("x: " + vx.toFixed(3), x + 10, this.coordinateSystem.oY - 8);
                }
            }
            this.g.restore();
            return this;
        };
        //???????
        BaseChart.prototype.paintTipCase = function (x, y, flag) {
            var vx = this.coordinateSystem.xOrigin + (x - 45) * (this.coordinateSystem.xEdge - this.coordinateSystem.xOrigin) / this.coordinateSystem.lX,
                vy = this.coordinateSystem.yOrigin + Math.abs(y - this.config.canvasHeight + 45) * (this.coordinateSystem.yEdge - this.coordinateSystem.yOrigin) / this.coordinateSystem.lY;
            if (this.isInChart(x, y)) {
                this.g.fillStyle = 'rgba(0, 0, 0, 0.7)';
                if (x + 90 > this.coordinateSystem.rxEdge) {
                    x = this.coordinateSystem.rxEdge - 90;
                }
                if (flag) {
                    this.g.fillRect(x + 10, y + 10, 80, 40);
                    this.g.font = '12px serif';
                    this.g.fillStyle = '#fff';
                    this.g.fillText("x: " + flag.cx.toFixed(3), x + 15, y + 25);
                    this.g.fillText("y: " + flag.cy.toFixed(3), x + 15, y + 40);
                }
            }
            return this;
        };
        //?????
        BaseChart.prototype.analyseItems = function (item, index) {
            var _this = this;
            var circleInfo = [];
            if (typeof item.value === 'function') {
                return item.value;
            } else {
                //????????
                item.value.map(function (it, index) {
                    var cyc = _this.coordinateSystem.calc(it[0], it[1]);
                    circleInfo.push({
                        x: cyc.x,
                        y: cyc.y,
                        cx: it[0],
                        cy: it[1],
                        r: 3
                    });
                });
                return circleInfo;
            }
        };
        //?????
        BaseChart.prototype.renderPoints = function (p, color) {
            //??????
            var cyc = new _DrawArc(this.g, this.defaultRadius, 360),
                line = new DrawLine(this.g, p[0].x, p[0].y, color).paint(cyc);
            //?????????
            for (var i = 1, length_1 = p.length; i < length_1; i++) {
                i === length_1 ? line.next(p[i].x, p[i].y).paint(cyc) : line.end(p[i].x, p[i].y).paint(cyc);
            }
        };
        //??????
        BaseChart.prototype.renderExpression = function (exp, color) {
            var i = this.coordinateSystem.xOrigin,
                p = this.coordinateSystem.calc(i, exp(i)),
                line = new DrawLine(this.g, p.x, p.y, color);
            //????????????????>yEdge
            while (i < this.coordinateSystem.xEdge) {
                i += 0.02;
                p = this.coordinateSystem.calc(i, exp(i));
                if (i > this.coordinateSystem.xEdge || exp(i) > this.coordinateSystem.yEdge || exp(i) < this.coordinateSystem.yOrigin || i < this.coordinateSystem.xOrigin) {
                    line.next(p.x, p.y, 'transparent');
                } else {
                    line.next(p.x, p.y, color);
                }
            }
            line.end(p.x, p.y);
        };
        BaseChart.prototype.renderResult = function (data) {
            var _this = this;
            data.map(function (cir) {
                if (typeof cir.ele === 'function') {
                    _this.renderExpression(cir.ele, cir.color);
                } else {
                    _this.renderPoints(cir.ele, cir.color);
                }
            });
            return this;
        };
        return BaseChart;
    }(InitialChart);
    /*
    * @PointChart: ????
    * ???BaseChart
    *
    * ?????
    * analyseItems
    * renderResult
    * paintTipCase
    */
    var PointChart = /** @class */function (_super) {
        __extends(PointChart, _super);
        function PointChart(Graphics, config) {
            return _super.call(this, Graphics, config) || this;
        }
        //????????
        PointChart.prototype.getRadius = function (weights) {
            var _this = this;
            var temp = [],
                minWeight = 0;
            weights.map(function (w) {
                if (w) {
                    temp.push(w);
                }
            });
            //???????
            //??????????????????? 1
            minWeight = temp.length ? _MIN(temp) : 1;
            //??????????????????????
            weights = weights.map(function (w) {
                if (w === undefined) {
                    w = minWeight;
                }
                return w;
            });
            return weights.map(function (w) {
                return Math.sqrt(w / minWeight) * _this.defaultRadius;
            });
        };
        //?????
        PointChart.prototype.analyseItems = function (item, index) {
            var _this = this;
            var radiusList = this.getRadius(item.value.map(function (i) {
                return i[2];
            })),
                circleInfo = [];
            //????????
            item.value.map(function (it, index) {
                var cyc = _this.coordinateSystem.calc(it[0], it[1]);
                circleInfo.push({
                    x: cyc.x,
                    y: cyc.y,
                    r: radiusList[index],
                    w: it[2],
                    cx: it[0],
                    cy: it[1]
                });
            });
            return circleInfo;
        };
        //?????
        PointChart.prototype.renderResult = function (data) {
            var _this = this;
            this.g.save();
            this.g.globalAlpha = 0.8;
            data.map(function (cir) {
                cir.ele.map(function (c) {
                    new _DrawArc(_this.g, c.r, 360).render(c.x, c.y, cir.color);
                });
            });
            this.g.restore();
            return this;
        };
        //???????
        PointChart.prototype.paintTipCase = function (x, y, flag) {
            var vx = (x - 45) * (this.coordinateSystem.xEdge - this.coordinateSystem.xOrigin) / this.coordinateSystem.lX,
                vy = Math.abs(y - this.config.canvasHeight + 45) * (this.coordinateSystem.yEdge - this.coordinateSystem.yOrigin) / this.coordinateSystem.lY;
            this.g.fillStyle = 'rgba(0, 0, 0, 0.7)';
            if (x + 90 > this.coordinateSystem.rxEdge) {
                x = this.coordinateSystem.rxEdge - 90;
            }
            if (this.isInChart(x, y)) {
                if (flag) {
                    this.g.fillRect(x + 10, y + 10, 80, 55);
                    this.g.font = '12px serif';
                    this.g.fillStyle = '#fff';
                    this.g.fillText("x: " + flag.cx.toFixed(3), x + 15, y + 25);
                    this.g.fillText("y: " + flag.cy.toFixed(3), x + 15, y + 40);
                    this.g.fillText("weight: " + (flag.w ? flag.w : 'none'), x + 15, y + 55);
                }
            }
            return this;
        };
        return PointChart;
    }(BaseChart);
    /*
    * @AreaChart: ????
    * ???BaseChart
    *
    * ?????
    * reRender
    * analyseItems
    * paintTipCase
    * mouseSelect
    * paintGrid
    * drawCoordinateSystem
    * renderResult
    */
    var AreaChart = /** @class */function (_super) {
        __extends(AreaChart, _super);
        function AreaChart(Graphics, config) {
            var _this = _super.call(this, Graphics, config) || this;
            _this.length = 0;
            _this.interval = 0;
            _this.defaultRadius = 4.5;
            if (_this.config.xAxis === undefined) {
                console.warn("'xAxis' option is required.");
                return null;
            }
            _this.length = _this.config.xAxis.length;
            _this.config.length = _this.length;
            _this.checkDataIsComplete(_this.config.items);
            return _this;
        }
        AreaChart.prototype.reRender = function (x, y) {
            this.g.save();
            //?????
            this.drawXaxis().paintGrid().drawCoordinateSystem().renderResult(this.data).paintTargetLineY(x, y).paintTipCase(x, y, this.mouseSelect(this.data, x, y));
            this.g.restore();
        };
        //???????
        AreaChart.prototype.checkDataIsComplete = function (items) {
            var _this = this;
            var diff = 0;
            items.map(function (item) {
                diff = _this.length - item.value.length;
                if (diff > 0) {
                    while (diff--) {
                        item.value.push(0);
                    }
                }
            });
            return this;
        };
        //?????
        AreaChart.prototype.analyseItems = function (item, index) {
            var _this = this;
            var circleInfo = [];
            //????????
            item.value.map(function (p, i) {
                var pi = _this.data.length > 0 ? _this.data[index - 1].ele[i].cy + p : p,
                    cyc = _this.coordinateSystem.calc(0, pi);
                circleInfo.push({
                    y: cyc.y,
                    cy: pi,
                    count: p
                });
            });
            return circleInfo;
        };
        //???????
        AreaChart.prototype.paintTipCase = function (x, y, flag) {
            var _this = this;
            var sum = 0;
            if (x + 90 > this.coordinateSystem.rxEdge + 20) {
                x = this.coordinateSystem.rxEdge - 70;
            }
            if (this.isInChart(x, y)) {
                this.g.fillStyle = 'rgba(0, 0, 0, 0.7)';
                if (flag) {
                    this.g.fillRect(x + 15, y, 80, 35 + this.items.length * 20);
                    this.g.font = '12px serif';
                    this.g.fillStyle = '#fff';
                    this.g.fillText(flag.xLabel, x + 20, y + 15);
                    flag.points.map(function (p, i) {
                        _this.g.fillText(p.label + ": " + p.p.count, x + 20, 18 + y + (i + 1) * 17);
                        sum = sum + p.p.count;
                    });
                    this.g.fillText("total: " + sum, x + 20, y + 25 + this.items.length * 20);
                    sum = 0;
                }
            }
            return this;
        };
        //????????
        AreaChart.prototype.mouseSelect = function (data, x, y) {
            var _this = this;
            //???????????????????
            var flag = null;
            this.g.strokeStyle = '#000';
            this.g.setLineDash([4, 2]);
            this.g.strokeStyle = '#666';
            if (this.items.length) {
                data[0].ele.map(function (p, i) {
                    _this.g.beginPath();
                    _this.g.rect(p.x - _this.interval / 2, _this.coordinateSystem.ryEdge, _this.interval, _this.coordinateSystem.lY);
                    if (_this.g.isPointInPath(x, y)) {
                        new DrawLine(_this.g, p.x, _this.coordinateSystem.ryEdge).end(p.x, _this.coordinateSystem.oY);
                        data.map(function (item) {
                            return {
                                p: item.ele[i],
                                color: item.color
                            };
                        }).map(function (p) {
                            new _DrawArc(_this.g, Math.floor(_this.defaultRadius * 1.4), 360).render(p.p.x, p.p.y, p.color);
                        });
                        flag = {
                            points: data.map(function (item) {
                                return {
                                    p: item.ele[i],
                                    label: item.label
                                };
                            }),
                            xLabel: _this.config.xAxis[i]
                        };
                    }
                });
            }
            return flag;
        };
        //????
        AreaChart.prototype.paintGrid = function () {
            this.g.save();
            this.config.grid && this.drawGridY();
            this.g.restore();
            return this;
        };
        //?????
        AreaChart.prototype.drawCoordinateSystem = function () {
            this.coordinateSystem.rightAngle().setYIntervalPoint().baseLineX();
            return this;
        };
        //??x???
        AreaChart.prototype.drawXaxis = function () {
            var _this = this;
            var interval = this.coordinateSystem.lX / (this.length - 1);
            this.interval = interval;
            this.g.save();
            this.g.textAlign = 'center';
            this.config.xAxis.map(function (gapName, index) {
                var x = _this.coordinateSystem.oX + index * interval;
                new DrawLine(_this.g, x, _this.coordinateSystem.oY).end(x, _this.coordinateSystem.oY + 5);
                _this.data.map(function (item) {
                    item.ele[index].x = x;
                });
                _this.g.fillText(gapName, x, _this.coordinateSystem.oY + 25);
            });
            this.g.restore();
            return this;
        };
        AreaChart.prototype.renderResult = function (data) {
            var _this = this;
            this.g.save();
            for (var j = 0; j < data.length; j++) {
                var line = null,
                    cur = data[j],
                    prev = j > 0 ? data[j - 1] : cur;
                for (var i = 0; i < cur.ele.length; i++) {
                    var c = cur.ele[i],
                        p = prev.ele[i];
                    this.g.fillStyle = cur.color;
                    this.g.globalAlpha = 0.5;
                    if (j === 0) {
                        if (i === 0) {
                            line = new DrawLine(this.g, this.coordinateSystem.oX, this.coordinateSystem.oY, prev.color).next(p.x, p.y);
                        } else if (i === prev.ele.length - 1) {
                            line = line.next(p.x, p.y).end(this.coordinateSystem.rxEdge, this.coordinateSystem.oY, true);
                        } else {
                            line = line.next(p.x, p.y);
                        }
                    } else {
                        if (i === 0) {
                            line = new DrawLine(this.g, p.x, p.y, cur.color).next(c.x, c.y);
                        } else if (i === cur.ele.length - 1) {
                            line = line.next(c.x, c.y);
                            for (var k = prev.ele.length - 1; k >= 0; k--) {
                                line = line.next(prev.ele[k].x, prev.ele[k].y);
                            }
                            line.end(cur.ele[0].x, cur.ele[0].y, true);
                        } else {
                            line = line.next(c.x, c.y);
                        }
                    }
                }
            }
            this.g.restore();
            //????
            data.map(function (c) {
                c.ele.map(function (p) {
                    new _DrawArc(_this.g, _this.defaultRadius, 360).render(p.x, p.y, c.color);
                });
            });
            return this;
        };
        return AreaChart;
    }(BaseChart);
    /*
    * @PillarChart: ????
    * ???AreaChart
    *
    * ?????
    * analyseItems
    * paintTipCase
    * mouseSelect
    * drawXaxis
    * renderResult
    */
    var PillarChart = /** @class */function (_super) {
        __extends(PillarChart, _super);
        function PillarChart(Graphics, config) {
            var _this = _super.call(this, Graphics, config) || this;
            _this.width = 0;
            //???????
            _this.config.trendLine = _this.config.trendLine === undefined ? false : _this.config.trendLine;
            return _this;
        }
        //?????
        PillarChart.prototype.analyseItems = function (item, index) {
            var _this = this;
            var valueInfo = [];
            this.interval = this.coordinateSystem.lX / this.length;
            this.width = this.interval / (2 * this.items.length + 1);
            item.value.map(function (v, i) {
                var x = _this.coordinateSystem.oX + i * _this.interval + _this.width * (2 * index + 1),
                    height = _this.coordinateSystem.oY - _this.coordinateSystem.calc(0, v).y;
                valueInfo.push({
                    x: x,
                    y: _this.coordinateSystem.oY - height,
                    width: _this.width,
                    height: height,
                    value: v
                });
            });
            return valueInfo;
        };
        //???????
        PillarChart.prototype.paintTipCase = function (x, y, flag) {
            var _this = this;
            if (x + 90 > this.coordinateSystem.rxEdge + 20) {
                x = this.coordinateSystem.rxEdge - 70;
            }
            if (this.isInChart(x, y)) {
                this.g.fillStyle = 'rgba(0, 0, 0, 0.7)';
                if (flag.data.length) {
                    this.g.fillRect(x + 15, y, 80, 25 + this.items.length * 20);
                    this.g.font = '12px serif';
                    this.g.fillStyle = '#fff';
                    this.g.fillText(flag.xLabel, x + 20, y + 15);
                    flag.data.map(function (v, i) {
                        _this.g.fillText(v.label + ": " + v.value, x + 20, y + 35 + i * 20);
                    });
                }
            }
            return this;
        };
        //????????
        PillarChart.prototype.mouseSelect = function (data, x, y) {
            //???????????????????
            var flag = {
                data: [],
                xLabel: ''
            };
            if (this.items.length) {
                var _loop_1 = function _loop_1(i) {
                    var rx = this_1.coordinateSystem.oX + i * this_1.interval;
                    this_1.g.beginPath();
                    this_1.g.rect(rx, this_1.coordinateSystem.ryEdge, this_1.interval, this_1.coordinateSystem.lY);
                    if (this_1.g.isPointInPath(x, y)) {
                        this_1.g.save();
                        this_1.g.fillStyle = _Gconfig.defaultColor;
                        this_1.g.globalAlpha = 0.1;
                        this_1.g.fill();
                        data.map(function (rect) {
                            flag.data.push({
                                value: rect.ele[i].value,
                                label: rect.label
                            });
                        });
                        flag.xLabel = this_1.config.xAxis[i];
                        this_1.g.restore();
                    }
                };
                var this_1 = this;
                for (var i = 0; i < this.length; i++) {
                    _loop_1(i);
                }
            }
            return flag;
        };
        //??x???
        PillarChart.prototype.drawXaxis = function () {
            var _this = this;
            var interval = this.interval;
            this.g.save();
            this.g.textAlign = 'center';
            this.config.xAxis.map(function (gapName, index) {
                var x = _this.coordinateSystem.oX + index * interval;
                new DrawLine(_this.g, x, _this.coordinateSystem.oY).end(x, _this.coordinateSystem.oY + 5);
                _this.g.fillText(gapName, x + interval / 2, _this.coordinateSystem.oY + 25);
            });
            this.g.restore();
            return this;
        };
        PillarChart.prototype.renderResult = function (data) {
            var _this = this;
            data.map(function (rect, index) {
                rect.ele.map(function (v, i) {
                    new _DrawRect(_this.g, v.width, v.height).render(v.x, v.y, rect.color);
                });
            });
            return this;
        };
        return PillarChart;
    }(AreaChart);
    /*
    * @LineChart: ????
    * ???AreaChart
    *
    * ?????
    * analyseItems
    * paintTipCase
    * drawXaxis
    * renderResult
    */
    var LineChart = /** @class */function (_super) {
        __extends(LineChart, _super);
        function LineChart(Graphics, config) {
            return _super.call(this, Graphics, config) || this;
        }
        //??x???
        LineChart.prototype.drawXaxis = function () {
            var _this = this;
            var interval = this.interval;
            this.g.save();
            this.g.textAlign = 'center';
            this.config.xAxis.map(function (gapName, index) {
                var x = _this.coordinateSystem.oX + (index + 1) * interval;
                new DrawLine(_this.g, x, _this.coordinateSystem.oY).end(x, _this.coordinateSystem.oY + 5);
                _this.data.map(function (item) {
                    item.ele[index].x = x;
                });
                _this.g.fillText(gapName, x, _this.coordinateSystem.oY + 25);
            });
            this.g.restore();
            return this;
        };
        //?????
        LineChart.prototype.analyseItems = function (item, index) {
            var _this = this;
            var circleInfo = [];
            this.interval = this.coordinateSystem.lX / (this.length + 1);
            //????????
            item.value.map(function (p, i) {
                var cyc = _this.coordinateSystem.calc(0, p),
                    x = _this.coordinateSystem.oX + _this.interval + _this.interval * i;
                circleInfo.push({
                    x: x,
                    y: cyc.y,
                    value: p
                });
            });
            return circleInfo;
        };
        //???????
        LineChart.prototype.paintTipCase = function (x, y, flag) {
            var _this = this;
            if (x + 90 > this.coordinateSystem.rxEdge + 20) {
                x = this.coordinateSystem.rxEdge - 70;
            }
            if (this.isInChart(x, y)) {
                this.g.fillStyle = 'rgba(0, 0, 0, 0.7)';
                if (flag) {
                    this.g.fillRect(x + 15, y, 80, 20 + this.items.length * 20);
                    this.g.font = '12px serif';
                    this.g.fillStyle = '#fff';
                    this.g.fillText(flag.xLabel, x + 20, y + 15);
                    flag.points.map(function (p, i) {
                        _this.g.fillText(p.label + ": " + p.p.value, x + 20, 18 + y + (i + 1) * 17);
                    });
                }
            }
            return this;
        };
        LineChart.prototype.renderResult = function (data) {
            var _this = this;
            var line = null,
                cyc = new _DrawArc(this.g, this.defaultRadius, 360);
            data.map(function (p, index) {
                p.ele.map(function (v, i) {
                    if (i === 0) {
                        line = new DrawLine(_this.g, v.x, v.y, p.color);
                    } else if (i === p.ele.length - 1) {
                        line = line.end(v.x, v.y);
                    } else {
                        line = line.next(v.x, v.y);
                    }
                    line.paint(cyc);
                });
            });
            return this;
        };
        return LineChart;
    }(AreaChart);
    /*
    * ???
    * @PieChart: ????
    */
    var PieChart = /** @class */function (_super) {
        __extends(PieChart, _super);
        function PieChart(Graphics, config) {
            var _this = _super.call(this, Graphics, config) || this;
            //??????
            _this.radius = 120;
            //???????????
            _this.centerPoint = [];
            //????
            _this.total = 0;
            //??????
            _this.config.radius = _this.config.radius === undefined ? _this.radius : _this.config.radius;
            //?????
            _this.centerPoint = [_this.config.canvasWidth / 2, _this.config.canvasHeight / 2];
            return _this;
        }
        //??????????????????????
        PieChart.prototype.analyseItems = function (item, index) {
            if (index === 0) {
                //????
                this.total = _SUM(this.items.map(function (item) {
                    return item.value;
                }));
            }
            return {
                value: item.value,
                angle: item.value * 360 / this.total,
                ratio: (item.value / this.total * 100).toFixed(1) + '%'
            };
        };
        ;
        //????????????????
        PieChart.prototype.renderResult = function (data) {
            var _this = this;
            var cir = null,
                startAngle = 0,
                endAngle = 0;
            this.g.save();
            this.g.globalAlpha = 0.8;
            data.map(function (pie) {
                if (!cir) {
                    cir = new _DrawArc(_this.g, _this.config.radius, pie.ele.angle).render(_this.centerPoint[0], _this.centerPoint[1], pie.color);
                } else {
                    cir = cir.next(pie.ele.angle, pie.color);
                }
            });
            this.g.strokeStyle = '#fff';
            this.g.lineWidth = 1.5;
            data.map(function (pie, index) {
                if (index === 0) {
                    startAngle = 0;
                    endAngle = pie.ele.angle;
                } else {
                    startAngle = endAngle;
                    endAngle = startAngle + pie.ele.angle;
                }
                _this.g.beginPath();
                _this.g.moveTo(_this.centerPoint[0], _this.centerPoint[1]);
                _this.g.arc(_this.centerPoint[0], _this.centerPoint[1], _this.config.radius, _degree2Radian(startAngle), _degree2Radian(endAngle));
                _this.g.closePath();
                _this.g.stroke();
            });
            this.g.restore();
            return this;
        };
        ;
        //???????
        PieChart.prototype.isInCircle = function (x, y) {
            this.g.beginPath();
            this.g.arc(this.centerPoint[0], this.centerPoint[1], this.config.radius, 0, 2 * Math.PI);
            return this.g.isPointInPath(x, y);
        };
        //?????
        PieChart.prototype.paintTipCase = function (x, y, flag) {
            if (this.isInCircle(x, y)) {
                this.g.fillStyle = 'rgba(0, 0, 0, 0.5)';
                if (flag) {
                    this.g.fillRect(x, y - 60, 110, 50);
                    this.g.font = '12px serif';
                    this.g.fillStyle = '#fff';
                    this.g.fillText("lable: " + flag.label, x + 10, y - 45);
                    this.g.fillText("data: " + flag.ele.value, x + 10, y - 30);
                    this.g.fillText("ratio: " + flag.ele.ratio, x + 10, y - 15);
                }
            }
            return this;
        };
        ;
        //??????????
        PieChart.prototype.mouseSelect = function (data, x, y) {
            var _this = this;
            //???????????????????
            var flag = null,
                startAngle = 0,
                endAngle = 0;
            data.map(function (pie, index) {
                _this.g.save();
                _this.g.fillStyle = pie.color;
                if (index === 0) {
                    startAngle = 0;
                    endAngle = pie.ele.angle;
                } else {
                    startAngle = endAngle;
                    endAngle = startAngle + pie.ele.angle;
                }
                _this.g.beginPath();
                _this.g.moveTo(_this.centerPoint[0], _this.centerPoint[1]);
                _this.g.arc(_this.centerPoint[0], _this.centerPoint[1], _this.config.radius + _this.config.radius * 0.15, _degree2Radian(startAngle), _degree2Radian(endAngle));
                _this.g.closePath();
                if (_this.g.isPointInPath(x, y)) {
                    _this.g.shadowOffsetX = 2;
                    _this.g.shadowOffsetY = 2;
                    _this.g.shadowBlur = 8;
                    _this.g.shadowColor = "rgba(0, 0, 0, 0.5)";
                    _this.g.fill();
                    flag = pie;
                }
                _this.g.restore();
            });
            return flag;
        };
        ;
        PieChart.prototype.reRender = function (x, y) {
            this.g.save();
            //??????
            this.renderResult(this.data).paintTipCase(x, y, this.mouseSelect(this.data, x, y));
            this.g.restore();
        };
        ;
        return PieChart;
    }(InitialChart);
    /*
    * @PieChart: ????
    * ???PieChart
    *
    * ?????
    * paintTipCase
    * mouseSelect
    */
    var AnnularChart = /** @class */function (_super) {
        __extends(AnnularChart, _super);
        function AnnularChart(Graphics, config) {
            var _this = _super.call(this, Graphics, config) || this;
            //????
            _this.width = 65;
            _this.config.width = _this.config.width === undefined ? _this.width : _this.config.width;
            return _this;
        }
        //????????
        AnnularChart.prototype.drawCenterCircle = function () {
            new _DrawArc(this.g, this.config.radius - this.config.width, 360).render(this.centerPoint[0], this.centerPoint[1], '#fff');
            return this;
        };
        //??????????
        AnnularChart.prototype.mouseSelect = function (data, x, y) {
            var _this = this;
            //???????????????????
            var flag = null,
                startAngle = 0,
                endAngle = 0;
            this.g.strokeStyle = '#000';
            data.map(function (pie, index) {
                if (index === 0) {
                    startAngle = 0;
                    endAngle = pie.ele.angle;
                } else {
                    startAngle = endAngle;
                    endAngle = startAngle + pie.ele.angle;
                }
                if (_this.isInAnnular(x, y)) {
                    _this.g.beginPath();
                    _this.g.moveTo(_this.centerPoint[0], _this.centerPoint[1]);
                    _this.g.arc(_this.centerPoint[0], _this.centerPoint[1], _this.config.radius, _degree2Radian(startAngle), _degree2Radian(endAngle));
                    _this.g.closePath();
                    if (_this.g.isPointInPath(x, y)) {
                        _this.g.save();
                        _this.g.globalAlpha = 0.5;
                        _this.g.fill();
                        flag = pie;
                        _this.g.restore();
                    }
                }
            });
            return flag;
        };
        ;
        //???????
        AnnularChart.prototype.isInAnnular = function (x, y) {
            var inCircle = false,
                outAnnular = false;
            this.g.beginPath();
            this.g.arc(this.centerPoint[0], this.centerPoint[1], this.config.radius, 0, 2 * Math.PI);
            if (this.g.isPointInPath(x, y)) {
                inCircle = true;
            }
            this.g.beginPath();
            this.g.arc(this.centerPoint[0], this.centerPoint[1], this.config.radius - this.config.width, 0, 2 * Math.PI);
            if (!this.g.isPointInPath(x, y)) {
                outAnnular = true;
            }
            return outAnnular && inCircle;
        };
        //?????
        AnnularChart.prototype.paintTipCase = function (x, y, flag) {
            this.drawCenterCircle();
            if (this.isInAnnular(x, y)) {
                this.g.fillStyle = 'rgba(0, 0, 0, 0.5)';
                if (flag) {
                    this.g.fillRect(x, y - 60, 110, 50);
                    this.g.font = '12px serif';
                    this.g.fillStyle = '#fff';
                    this.g.fillText("lable: " + flag.label, x + 10, y - 45);
                    this.g.fillText("data: " + flag.ele.value, x + 10, y - 30);
                    this.g.fillText("ratio: " + flag.ele.ratio, x + 10, y - 15);
                }
            }
            return this;
        };
        ;
        return AnnularChart;
    }(PieChart);
    /*
    * ???
    * @RadarChart: ????
    */
    var RadarChart = /** @class */function (_super) {
        __extends(RadarChart, _super);
        function RadarChart(Graphics, config) {
            var _this = _super.call(this, Graphics, config) || this;
            _this.defaultRadius = 200;
            _this.length = 0;
            _this.radarSystem = true;
            //index??????
            if (_this.config.index === undefined) {
                console.warn("'index' option is required.");
                return null;
            }
            //??????
            _this.defaultRadius = _this.config.radius === undefined ? _this.defaultRadius : _this.config.radius;
            _this.config.defaultRadius = _this.defaultRadius;
            _this.length = _this.config.index.length;
            _this.config.centerX = _this.config.canvasWidth / 2;
            _this.config.centerY = _this.config.canvasHeight / 2;
            _this.checkDataIsComplete(_this.config.items);
            return _this;
        }
        //???????
        RadarChart.prototype.checkDataIsComplete = function (items) {
            var _this = this;
            var diff = 0;
            items.map(function (item) {
                diff = _this.length - item.value.length;
                if (diff > 0) {
                    while (diff--) {
                        item.value.push(0);
                    }
                }
            });
            return this;
        };
        //?????
        RadarChart.prototype.drawRadarNet = function (index) {
            this.radarSystem.render();
            return this;
        };
        RadarChart.prototype.analyseItems = function (item, index) {
            var _this = this;
            var valueList = [];
            item.value.map(function (v, i) {
                var d = _this.radarSystem.calc(v, i);
                valueList.push({
                    x: d.x,
                    y: d.y,
                    value: v
                });
            });
            return valueList;
        };
        ;
        RadarChart.prototype.renderResult = function (data) {
            var _this = this;
            var line = null;
            this.g.save();
            this.g.globalAlpha = 0.7;
            data.map(function (d) {
                _this.g.fillStyle = d.color;
                d.ele.map(function (p, i) {
                    if (i === 0) {
                        line = new DrawLine(_this.g, p.x, p.y, d.color);
                    } else if (i === d.ele.length - 1) {
                        line = line.end(p.x, p.y, true);
                    } else {
                        line = line.next(p.x, p.y);
                    }
                });
            });
            this.g.restore();
            data.map(function (d) {
                d.ele.map(function (p) {
                    new _DrawArc(_this.g, 3, 360).render(p.x, p.y, d.color);
                });
            });
            return this;
        };
        ;
        //?????
        RadarChart.prototype.paintTipCase = function (x, y, flag) {
            var _this = this;
            this.g.fillStyle = 'rgba(0, 0, 0, 0.5)';
            if (flag) {
                this.g.fillRect(x + 15, y, 110, 30 + this.config.index.length * 20);
                this.g.font = '12px serif';
                this.g.fillStyle = '#fff';
                this.g.fillText("lable: " + flag.label, x + 20, y + 20);
                this.config.index.map(function (t, i) {
                    _this.g.fillText(t + ": " + flag.ele[i].value, x + 20, y + 40 + i * 20);
                });
            }
            return this;
        };
        ;
        //??????????
        RadarChart.prototype.mouseSelect = function (data, x, y) {
            var _this = this;
            //???????????????????
            var flag = null,
                startAngle = 0,
                endAngle = 0;
            data.map(function (d, index) {
                _this.g.save();
                _this.g.fillStyle = d.color;
                _this.g.beginPath();
                d.ele.map(function (v, i) {
                    if (i === 0) {
                        _this.g.moveTo(v.x, v.y);
                    } else {
                        _this.g.lineTo(v.x, v.y);
                    }
                });
                _this.g.closePath();
                if (_this.g.isPointInPath(x, y)) {
                    _this.g.globalAlpha = 0.7;
                    _this.g.fill();
                    flag = d;
                }
                _this.g.restore();
            });
            return flag;
        };
        ;
        RadarChart.prototype.reRender = function (x, y) {
            this.g.save();
            //??????
            this.drawRadarNet(this.config.index).renderResult(this.data).paintTipCase(x, y, this.mouseSelect(this.data, x, y));
            this.g.restore();
        };
        ;
        return RadarChart;
    }(InitialChart);
    /*
    * ???
    * @PolarChart: ????
    */
    var PolarChart = /** @class */function (_super) {
        __extends(PolarChart, _super);
        function PolarChart(Graphics, config) {
            var _this = _super.call(this, Graphics, config) || this;
            _this.defaultRadius = 250;
            _this.polarSystem = true;
            _this.margin = 2;
            //??????
            _this.defaultRadius = _this.config.radius === undefined ? _this.defaultRadius : _this.config.radius;
            _this.config.defaultRadius = _this.defaultRadius;
            return _this;
        }
        //?????
        PolarChart.prototype.drawPolarNet = function () {
            this.polarSystem.render();
            return this;
        };
        //?????????
        PolarChart.prototype.isInCircle = function (x, y) {
            this.g.beginPath();
            this.g.arc(this.polarSystem.oX, this.polarSystem.oY, this.defaultRadius, 0, 2 * Math.PI);
            return this.g.isPointInPath(x, y);
        };
        //?????
        PolarChart.prototype.paintTargetLine = function (x, y) {
            var radius = Math.sqrt(Math.abs(Math.pow(x - this.polarSystem.oX, 2) + Math.pow(y - this.polarSystem.oY, 2)));
            if (this.isInCircle(x, y)) {
                this.g.save();
                this.g.setLineDash([4, 2]);
                new _DrawArc(this.g, radius, 360, false).render(this.polarSystem.oX, this.polarSystem.oY, '#bbb');
                new DrawLine(this.g, this.polarSystem.oX, this.polarSystem.oY, '#bbb').end(x, y);
                this.g.restore();
            }
            return this;
        };
        //??????????
        PolarChart.prototype.mouseSelect = function (data, x, y) {
            var _this = this;
            //???????????????????
            var flag = null,
                angle = Math.PI * 2 / this.items.length;
            this.g.save();
            this.g.translate(this.polarSystem.oX, this.polarSystem.oY);
            data.map(function (d, index) {
                _this.g.fillStyle = d.color;
                _this.g.rotate(angle);
                _this.g.beginPath();
                _this.g.moveTo(3, 3);
                _this.g.arc(3, 3, Math.abs(d.ele.radius - _this.margin), 0, angle);
                _this.g.closePath();
                if (_this.g.isPointInPath(x, y)) {
                    _this.g.fill();
                    flag = d;
                }
            });
            this.g.restore();
            return flag;
        };
        ;
        //?????
        PolarChart.prototype.paintTipCase = function (x, y, flag) {
            var radius = Math.sqrt(Math.abs(Math.pow(x - this.polarSystem.oX, 2) + Math.pow(y - this.polarSystem.oY, 2)));
            this.g.fillStyle = 'rgba(0, 0, 0, 0.5)';
            this.g.font = '12px serif';
            if (this.isInCircle(x, y)) {
                if (flag) {
                    this.g.fillRect(x + 15, y, 80, 50);
                    this.g.font = '12px serif';
                    this.g.fillStyle = '#fff';
                    this.g.fillText("lable: " + flag.label, x + 20, y + 20);
                    this.g.fillText("value: " + flag.ele.value, x + 20, y + 40);
                } else {
                    this.g.fillRect(x + 15, y, 50, 20);
                    this.g.fillStyle = '#fff';
                    this.g.fillText((radius * this.polarSystem.edge / this.defaultRadius).toFixed(2), x + 20, y + 15);
                }
            }
            return this;
        };
        ;
        PolarChart.prototype.reRender = function (x, y) {
            this.g.save();
            //??????
            this.drawPolarNet().renderResult(this.data).paintTargetLine(x, y).paintTipCase(x, y, this.mouseSelect(this.data, x, y));
            this.g.restore();
        };
        ;
        PolarChart.prototype.analyseItems = function (item) {
            return {
                radius: this.polarSystem.calc(item.value),
                value: item.value
            };
        };
        PolarChart.prototype.renderResult = function (data) {
            var _this = this;
            var angle = Math.PI * 2 / this.items.length,
                pi2 = Math.PI / 2,
                x = this.margin,
                y = this.margin;
            this.g.save();
            this.g.translate(this.polarSystem.oX, this.polarSystem.oY);
            this.g.globalAlpha = 0.5;
            data.map(function (r, i) {
                _this.g.rotate(angle);
                new _DrawArc(_this.g, Math.abs(r.ele.radius - _this.margin), 360 / _this.items.length).render(x, y, r.color);
            });
            this.g.restore();
            return this;
        };
        return PolarChart;
    }(InitialChart);
    /*------------------------------???-END----------------------------------- */
    //??: ????
    ChartUp.extend({
        chartType: 'BaseChart',
        chartClass: BaseChart
    });
    //??: ????
    ChartUp.extend({
        chartType: 'PointChart',
        chartClass: PointChart
    });
    //??: ????
    ChartUp.extend({
        chartType: 'PillarChart',
        chartClass: PillarChart
    });
    //??: ????
    ChartUp.extend({
        chartType: 'LineChart',
        chartClass: LineChart
    });
    //??: ????
    ChartUp.extend({
        chartType: 'AreaChart',
        chartClass: AreaChart
    });
    //??: ????
    ChartUp.extend({
        chartType: 'PieChart',
        chartClass: PieChart
    });
    //??: ????
    ChartUp.extend({
        chartType: 'AnnularChart',
        chartClass: AnnularChart
    });
    //??: ????
    ChartUp.extend({
        chartType: 'RadarChart',
        chartClass: RadarChart
    });
    //??: ????
    ChartUp.extend({
        chartType: 'PolarChart',
        chartClass: PolarChart
    });
    window['Chart'] = ChartUp;
    return ChartUp;
}(window);
//es6 module  
//export default ChartUp;
</script>






<script>


(function() {
    
  

const color = {
    red: '#f33e6f',
    blue: '#2d91ea'
}
const getColor = function() {
    return '#'+ (Math.random()*0xffffff<<0).toString(16);
}  
    
    
    let i = 0;
	const BaseChart = ChartUp.BaseChart('#BaseChart', {
		interval: [5, 5],
		items: [	
			{
				label: 'y = (1/16)*x^2',
				value: function(x) {
					return (1/16)*x*x;
				},
				color: '#f33e6f'
			},
			{
				label: 'y = (1/20)*e^x',
				value: function(x) {
					return (1/20)*Math.pow(Math.E, x);
				},
				color: '#2d91ea'
			}
		]
	});



	const LineChart = ChartUp.LineChart('#LineChart', {
		interval: 20,
		xAxis: Array.from(new Array(6), (x, i) => `?${i + 1}??`),
		items: [{
			label: 'A',
			value: Array.from(new Array(6), x => Math.ceil(Math.random()*60)),
			color: '#f33e6f'
		}, 
		{
			label: 'C',
			value: Array.from(new Array(6), x => Math.ceil(Math.random()*60)),
			color: '#2d91ea'
		}]
	});


	const PillarChart =	ChartUp.PillarChart('#PillarChart', {
		interval: 20,
		xAxis: ['??', '??', '??', '??', '??', '??'],
		items: [{
			label: 'A',
			value: Array.from(new Array(6), x => Math.ceil(Math.random()*60)),
			color: color.red
		}, 
		{
			label: 'B',
			value: Array.from(new Array(6), x => Math.ceil(Math.random()*60)),
			color: color.blue
		}]
	});


	const PointChart =	ChartUp.PointChart('#PointChart', {
		interval: [5, 5],
		defaultRadius: 4,
		items: [{
			label: 'A',
			value: Array.from(new Array(30), n => [Math.random()*65, Math.random()*30, Math.floor(Math.random()*10)]),
			color: color.red
		},
		{
			label: 'B',
			value: Array.from(new Array(20), n => [Math.random()*40, Math.random()*30, Math.floor(Math.random()*5)]),
			color: color.blue
		}]
	});


	const AreaChart = ChartUp.AreaChart('#AreaChart', {
		interval: 20,
		xAxis: Array.from(new Array(new Date().getFullYear() - 2010), (y, i) => new Date().getFullYear() - i).reverse(),
		items: [
			{
				label: 'A',
				color: color.red,
				value: Array.from(new Array(new Date().getFullYear() - 2010), x => Math.ceil(Math.random()*30)),
			},
			{
				label: 'B',
				color: color.blue,
				value: Array.from(new Array(new Date().getFullYear() - 2010), x => Math.ceil(Math.random()*30))
			}
		]
	});


	const PieChart = ChartUp.PieChart('#PieChart', {
		radius: 130,
		items: [{
			label: 'A',
			value: Math.ceil(Math.random()*100),
			color: color.red
		},
		{
			label: 'B',
			value: Math.ceil(Math.random()*100),
			color: color.blue
		}]
	});


	const AnnularChart = ChartUp.AnnularChart('#AnnularChart', {
		radius: 130,
		width: 50,
		items: [{
			label: 'A',
			value: Math.ceil(Math.random()*100),
			color: color.red
		},
		{
			label: 'B',
			value: Math.ceil(Math.random()*100),
			color: color.blue
		}]
	});



	const PolarChart = ChartUp.PolarChart('#PolarChart', {
		radius: 140,
		interval: 20,
		items: [{
			label: 'A',
			value: 15 + Math.ceil(Math.random()*100),
			color:color.red
		},
		{
			label: 'B',
			value: 10 + Math.ceil(Math.random()*100),
			color: color.blue
		},
		{
			label: 'C',
			value: 10 + Math.ceil(Math.random()*100),
			color:color.red
		},
		{
			label: 'D',
			value: 10 + Math.ceil(Math.random()*100),
			color: color.blue
		}]
	});



	const RadarChart = ChartUp.RadarChart('#RadarChart', {
		radius: 130,
		interval: 5,
		index: ['??', '??', '??', '??', '??'],
		items: [
			{
				label: 'A',
				value: Array.from(new Array(5), x => Math.ceil(Math.random()*15)),
				color: color.red
			},
			{
				label: 'B',
				value: Array.from(new Array(5), x => Math.ceil(Math.random()*15)),
				color: color.blue
			}
		]
	});

const addItemBtn = document.querySelectorAll('.addItem');

addItemBtn[0].addEventListener('click', function(e) {
        PillarChart.addItem({
			label: 'data' + (i++),
			value: Array.from(new Array(6), x => Math.ceil(Math.random()*Math.random()*100)),
			color: getColor()
		});
        LineChart.addItem({
			label: 'data' + (i++),
			value: Array.from(new Array(6), x => Math.ceil(Math.random()*Math.random()*200)),
			color: getColor()
		});
        const a = 1/(Math.random()*20),
		b = 1/(Math.random()*20);

		BaseChart.addItem({
			label: `y = ${a.toFixed(2)}*x^2 + ${b.toFixed(2)}*x`,
			value: function(x) {
				return a*Math.pow(x, 2) + b*x;
			},
			color: getColor()
		});
		RadarChart.addItem({
			label: 'data' + (i++),
			value: Array.from(new Array(5), x => Math.ceil(Math.random()*15)),
			color: getColor()
		});
        PolarChart.addItem({
			label: 'data' + (i++),
			value: 10 + Math.ceil(Math.random()*100),
			color: getColor()
		});
        AnnularChart.addItem({
			label: 'data' + (i++),
			value: Math.ceil(Math.random()*100),
			color: getColor()
		});
        PointChart.addItem({
			label: 'data' + (i++),
			value: Array.from(new Array(Math.ceil(Math.random()*10)), n => [Math.random()*65, Math.random()*30, Math.floor(Math.random()*10)]),
			color: getColor()
		});
    	AreaChart.addItem({
			label: 'data' + (i++),
			value: Array.from(new Array(new Date().getFullYear() - 2010), x => Math.ceil(Math.random()*25)),
			color: getColor()
		});
    	PieChart.addItem({
			label: 'data' + (i++),
			value: Math.ceil(Math.random()*100),
			color: getColor()
		});
});








const removeItemBtn = document.querySelectorAll('.removeItem');
removeItemBtn[0].addEventListener('click', function(e) {
		        //BaseChart.removeItem();
            	//LineChart.removeItem();
            	//PillarChart.removeItem();
            	//PointChart.removeItem();
            //	AreaChart.removeItem();
            	//PieChart.removeItem();
            //	AnnularChart.removeItem();
            //	PolarChart.removeItem();
            	RadarChart.removeItem();
                console.log(RadarChart);
	});


})();

</script>
</body></html>