From 2e3b00272827b466d00fcce39411da13546dfe46 Mon Sep 17 00:00:00 2001 From: Reming <927627286@qq.com> Date: Mon, 15 Jul 2019 19:40:33 +0800 Subject: [PATCH] chore: build version(v1.0.2) --- README.MD | 2 +- core/index.js | 2 +- lib/index.js | 166 ++++++++++++++++++++++++++++------------------- lib/index.min.js | 2 +- package.json | 2 +- 5 files changed, 103 insertions(+), 71 deletions(-) diff --git a/README.MD b/README.MD index ca078d7..50c4645 100644 --- a/README.MD +++ b/README.MD @@ -2,7 +2,7 @@ > The bar-chart visualization plugin -[![Build Status](https://travis-ci.org/reming0227/bar-chartjs.svg?branch=master)](https://travis-ci.org/reming0227/bar-chartjs) [![Version](https://img.shields.io/badge/npm-1.0.1-blue.svg)](https://www.npmjs.com/package/bar-chartjs) +[![Build Status](https://travis-ci.org/reming0227/bar-chartjs.svg?branch=master)](https://travis-ci.org/reming0227/bar-chartjs) [![Version](https://img.shields.io/badge/npm-1.0.2-blue.svg)](https://www.npmjs.com/package/bar-chartjs) ## 📦 Installation diff --git a/core/index.js b/core/index.js index ce8ae7d..51a8dc6 100644 --- a/core/index.js +++ b/core/index.js @@ -160,7 +160,7 @@ BarChart.prototype.drawBars = function (move_position) { label_val: optionManager.labels[Math.floor((move_position.x - self.yAxis_left) / step_len)], data_val: bar.val, style: bar.d_style - } + }; } else isSelect = false; drawBar(self.context, bar, isSelect); }); diff --git a/lib/index.js b/lib/index.js index f611dcd..a0b7ecd 100644 --- a/lib/index.js +++ b/lib/index.js @@ -39,7 +39,7 @@ } var optionManager = { - data: [], + series: [], labels: [], margin: { top: 30, @@ -81,16 +81,13 @@ style: '#ccc', width: 1 }, - bar: { + defaultBar: { + // set default style of bar style: { "default": 'rgba(16, 142, 233, 0.6)', select: 'rgb(16, 142, 233)' } }, - style: { - axis: '#aaa', - line: '#ccc' - }, duration: 500, tooltip: { title: '', @@ -98,18 +95,17 @@ height: 50, radius: 4, mark: { - radius: 5, - style: 'rgb(16, 142, 233)' + radius: 5 }, font: { size: 14, family: 'Arial', - style: 'rgba(0, 0, 0, 0.6)' + style: 'rgb(255, 255, 255)' } } }; - var barInfns = ['x', 'y', 'w', 'h']; + var barInfns = ['x', 'y', 'w', 'h', 'val', 'd_style', 'a_style']; /** * Create bar * @return {Object} item instance of bar-chart @@ -129,7 +125,7 @@ function drawBar(ctx, bar, isSelect) { - if (isSelect) ctx.fillStyle = optionManager.bar.style.select;else ctx.fillStyle = optionManager.bar.style["default"]; + if (isSelect) ctx.fillStyle = bar.a_style;else ctx.fillStyle = bar.d_style; ctx.fillRect(bar.x, bar.y, bar.w, bar.h); } @@ -159,12 +155,13 @@ /** * Draw Axis * @param {Object} ctx context of bar-chart + * @param {Number} base_pos the position of line that mark zero in y-axis * @param {Number} yAxis_left margin-left * @param {Number} area_w area width * @param {Number} area_h area height */ - function drawAxis(ctx, yAxis_left, area_w, area_h) { + function drawAxis(ctx, base_pos, yAxis_left, area_w, area_h) { ctx.beginPath(); ctx.strokeStyle = optionManager.yAxis.line.style; ctx.lineWidth = optionManager.yAxis.line.width; @@ -174,8 +171,8 @@ ctx.beginPath(); ctx.strokeStyle = optionManager.xAxis.line.style; ctx.lineWidth = optionManager.xAxis.line.width; - ctx.moveTo(yAxis_left, area_h); - ctx.lineTo(area_w + yAxis_left, area_h); + ctx.moveTo(yAxis_left, base_pos); + ctx.lineTo(area_w + yAxis_left, base_pos); ctx.stroke(); } /** @@ -187,7 +184,7 @@ */ - function drawXAxisLabel(ctx, yAxis_left, area_w, area_h) { + function drawXAxisLabel(ctx, base_pos, yAxis_left, area_w, area_h) { var labels = optionManager.labels; var x_step = area_w / (labels.length + 1); var tickLength = optionManager.xAxis.tick.length; @@ -198,9 +195,10 @@ ctx.fillStyle = optionManager.xAxis.font.style; for (var i = 1; i <= labels.length; i++) { - ctx.moveTo(yAxis_left + i * x_step, area_h); - ctx.lineTo(yAxis_left + i * x_step, area_h + tickLength); - ctx.fillText(labels[i - 1], yAxis_left + i * x_step, area_h + 20); + var x_pos = Math.round(i * x_step); + ctx.moveTo(yAxis_left + x_pos, base_pos); + ctx.lineTo(yAxis_left + x_pos, base_pos + tickLength); + ctx.fillText(labels[i - 1], yAxis_left + x_pos, area_h + 20); } ctx.closePath(); @@ -219,21 +217,22 @@ function drawYAxisLabel(ctx, tick, yAxis_left, phyStep, area_w, area_h) { var tickLength = optionManager.yAxis.tick.length; + var yStepAcc = tick[0]; ctx.textBaseline = 'middle'; ctx.textAlign = 'right'; ctx.font = "".concat(optionManager.yAxis.font.size, "px ").concat(optionManager.yAxis.font.family); ctx.fillStyle = optionManager.yAxis.font.style; - for (var i = 0; i <= tick[3]; i++) { + for (var i = 0; i <= tick[3]; i++, yStepAcc += tick[2]) { ctx.beginPath(); - ctx.fillText(tick[2] * i, yAxis_left - 10, Math.round(area_h - i * phyStep)); + ctx.fillText(yStepAcc, yAxis_left - 10, Math.round(area_h - i * phyStep)); ctx.strokeStyle = optionManager.yAxis.tick.style; ctx.lineWidth = optionManager.yAxis.tick.width; ctx.moveTo(yAxis_left - tickLength, Math.round(area_h - i * phyStep)); ctx.lineTo(yAxis_left, Math.round(area_h - i * phyStep)); ctx.closePath(); ctx.stroke(); - if (i === 0) continue; + if (i === Math.abs(tick[0]) / tick[2]) continue; ctx.beginPath(); ctx.strokeStyle = optionManager.guideLine.style; ctx.lineWidth = optionManager.guideLine.width; @@ -257,8 +256,9 @@ var yAxis_left = barChart.yAxis_left; var area_w = barChart.areaW; var area_h = barChart.areaH; - drawAxis(ctx, yAxis_left, area_w, area_h); - drawXAxisLabel(ctx, yAxis_left, area_w, area_h); + var base_pos = area_h + Math.round(tick[0] * barChart.phyScale); + drawAxis(ctx, base_pos, yAxis_left, area_w, area_h); + drawXAxisLabel(ctx, base_pos, yAxis_left, area_w, area_h); drawYAxisLabel(ctx, tick, yAxis_left, phyStep, area_w, area_h); } @@ -295,7 +295,10 @@ if (formatStep >= 0 && formatStep <= 0.1) formatStep = 0.1;else if (formatStep >= 0.100001 && formatStep <= 0.2) formatStep = 0.2;else if (formatStep >= 0.200001 && formatStep <= 0.25) formatStep = 0.25;else if (formatStep >= 0.250001 && formatStep <= 0.5) formatStep = 0.5;else formatStep = 1; formatStep *= tempStep; // modify min-tick - if (parseInt(minTick / formatStep) !== minTick / formatStep) minTick = parseInt(minTick / formatStep) * formatStep; // modify max-tick + if (parseInt(minTick / formatStep) !== minTick / formatStep) { + if (minTick < 0) minTick = -1 * Math.ceil(Math.abs(minTick / formatStep)) * formatStep;else minTick = parseInt(minTick / formatStep) * formatStep; + } // modify max-tick + if (parseInt(maxTick / formatStep) !== maxTick / formatStep) maxTick = (parseInt(maxTick / formatStep) + 1) * formatStep; // modify step-number @@ -370,12 +373,12 @@ * @param {Number} idx select index */ - function drawTooltip(ctx, move_position, idx) { + function drawTooltip(ctx, move_position, info) { var markRadius = optionManager.tooltip.mark.radius; - var tooltipText = "".concat(optionManager.tooltip.title).concat(optionManager.data[idx]); + var tooltipText = "".concat(optionManager.tooltip.title, " ").concat(info.data_val); ctx.font = "".concat(optionManager.tooltip.font.size, "px ").concat(optionManager.tooltip.font.family); var descWidth = ctx.measureText(tooltipText).width; - var titleWidth = ctx.measureText(optionManager.labels[idx]).width; + var titleWidth = ctx.measureText(info.label_val).width; var width = descWidth > titleWidth ? descWidth : titleWidth; width += 3 * markRadius; var additionWidth = 12; @@ -409,12 +412,13 @@ ctx.fillStyle = '#fff'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'; - ctx.fillText(optionManager.labels[idx], moveX + additionWidth / 2, moveY + 0.85 * tooltipHeight / 3); + ctx.fillStyle = optionManager.tooltip.font.style; + ctx.fillText(info.label_val, moveX + additionWidth / 2, moveY + 0.85 * tooltipHeight / 3); ctx.fillText(tooltipText, moveX + additionWidth / 2 + 3 * markRadius, moveY + 2.1 * tooltipHeight / 3); ctx.closePath(); ctx.stroke(); ctx.beginPath(); - ctx.fillStyle = optionManager.tooltip.mark.style; + ctx.fillStyle = info.style; ctx.arc(moveX + additionWidth / 2 + markRadius, moveY + 2 * tooltipHeight / 3, markRadius, 0, 2 * Math.PI); ctx.fill(); } @@ -451,15 +455,15 @@ BarChart.prototype.initEvent = function (canvasDom) { var self = this; - var mouse_position = Object.create(null); + var move_position = Object.create(null); canvasDom.addEventListener('mousemove', function () { - mouse_position.x = event.clientX - self.boundingRect.left; - mouse_position.y = event.clientY - self.boundingRect.top; + move_position.x = event.clientX - self.boundingRect.left; + move_position.y = event.clientY - self.boundingRect.top; clearTimeout(timer); var timer = setTimeout(function () { self.context.clearRect(0, 0, self.canvasW, self.canvasH); drawFrame(self); - self.drawBars(mouse_position); + self.drawBars(move_position); }, 1000 / 60); }); }; @@ -469,9 +473,15 @@ BarChart.prototype.initData = function () { - this.animQuota = 0; - this.min_data = Math.min.apply(Math, _toConsumableArray(optionManager.data)); - this.max_data = Math.max.apply(Math, _toConsumableArray(optionManager.data)); + if (optionManager.series.length > 1) this.series = true; + this.animIdx = 0; + var totalData = []; + optionManager.series.forEach(function (item, idx) { + totalData = totalData.concat(item.data); + }); + this.min_data = Math.min.apply(Math, _toConsumableArray(totalData)); + this.max_data = Math.max.apply(Math, _toConsumableArray(totalData)); + this.max_abs_data = Math.max(Math.abs(this.min_data), Math.abs(this.max_data)); }; /** * Init context @@ -509,18 +519,28 @@ BarChart.prototype.initBars = function () { - var _this = this; - - this.bars = []; - this.phyScale = (this.areaH - optionManager.margin.top) / this.tick[1]; - var bar_w = this.areaW / (optionManager.data.length + 1) / 2; - var next_x_axis = bar_w * 1.5; - optionManager.data.forEach(function (val, index) { - var bar = createBar(next_x_axis + _this.yAxis_left, _this.areaH, bar_w, -1 * val * _this.phyScale); - - _this.bars.push(bar); + var self = this; + self.bars = []; + self.phyScale = (self.areaH - optionManager.margin.top) / (self.tick[1] - self.tick[0]); + var step_len = self.areaW / (optionManager.labels.length + 1); + var bar_w = step_len / (2 * optionManager.series.length); + var big_step = 0, + small_step = 0; + optionManager.series.forEach(function (item, index) { + big_step = 0; + small_step += 1.5 * bar_w; // set default style + + if (!helpers.isObject(item.style)) { + item.style = Object.create(null); + item.style["default"] = optionManager.defaultBar.style["default"]; + item.style.active = optionManager.defaultBar.style.select; + } - next_x_axis += 2 * bar_w; + item.data.forEach(function (val, idx) { + var bar = createBar(big_step + small_step + self.yAxis_left, self.areaH + self.tick[0] * self.phyScale, bar_w, -1 * val * self.phyScale, val, item.style["default"], item.style.active); + self.bars.push(bar); + big_step += step_len; + }); }); }; /** @@ -529,11 +549,12 @@ BarChart.prototype.caculateScele = function () { - this.tick = helpers.getTick(this.min_data >= 0 ? 0 : this.min_data, this.max_data); - this.context.font = "".concat(optionManager.yAxis.font.size, " ").concat(optionManager.yAxis.font.size); - this.yAxis_left = parseInt(2 * this.context.measureText(this.tick[1]).width); - this.areaW = this.canvasW - this.yAxis_left; - this.areaH = this.canvasH - optionManager.margin.bottom; + var self = this; + self.tick = helpers.getTick(self.min_data >= 0 ? 0 : self.min_data, self.max_data); + self.context.font = "".concat(optionManager.yAxis.font.size, " ").concat(optionManager.yAxis.font.size); + self.yAxis_left = parseInt(3 * self.context.measureText(self.tick[1]).width); + self.areaW = self.canvasW - self.yAxis_left; + self.areaH = self.canvasH - optionManager.margin.bottom; }; /** * Render bar-chart @@ -554,15 +575,21 @@ BarChart.prototype.drawBars = function (move_position) { var self = this, isSelect = false, - selIdx = -1; + selInfo; + var step_len = self.areaW / (optionManager.labels.length + 1); self.bars.forEach(function (bar, idx) { - if (move_position && move_position.x >= bar.x && move_position.x <= bar.x + bar.w && move_position.y <= bar.y && move_position.y >= bar.y + bar.h) selIdx = idx; + if (move_position && move_position.x > bar.x && move_position.x < bar.x + bar.w && (move_position.y > bar.y + bar.h && move_position.y < bar.y || move_position.y > bar.y && move_position.y < bar.y + bar.h)) { + isSelect = true; + selInfo = { + label_val: optionManager.labels[Math.floor((move_position.x - self.yAxis_left) / step_len)], + data_val: bar.val, + style: bar.d_style + }; + } else isSelect = false; + drawBar(self.context, bar, isSelect); }); - - if (~selIdx) { - drawTooltip(self.context, move_position, selIdx); - } + if (selInfo) drawTooltip(self.context, move_position, selInfo); }; /** * Animation @@ -570,18 +597,23 @@ BarChart.prototype.animation = function () { - var ctx = this.context; - var tickMove = this.max_data * this.phyScale / (optionManager.duration * 1e-3 * 60); - ctx.clearRect(0, 0, this.canvasW, this.canvasH); + var self = this; + var ctx = self.context; + var tickMove = self.max_abs_data * self.phyScale / (optionManager.duration * 1e-3 * 60); + var baseLineH = self.canvasH + self.tick[0] * self.phyScale - optionManager.margin.bottom; + ctx.clearRect(0, 0, self.canvasW, self.canvasH); ctx.save(); - drawFrame(this); - this.animQuota -= tickMove; - ctx.rect(0, this.canvasH - optionManager.margin.bottom, this.canvasW, this.animQuota); + drawFrame(self); + self.animIdx -= tickMove; + var temp = self.animIdx; + ctx.beginPath(); + ctx.rect(0, baseLineH - temp, self.canvasW, 2 * temp); + ctx.closePath(); ctx.clip(); - this.drawBars(); + self.drawBars(); - if (this.animQuota > -1 * this.max_data * this.phyScale) { - var anim = this.animation.bind(this); + if (self.animIdx > -1 * self.max_abs_data * self.phyScale) { + var anim = self.animation.bind(self); helpers.requestAnimationFrame()(anim); } diff --git a/lib/index.min.js b/lib/index.min.js index 3a321a7..bb91fb1 100644 --- a/lib/index.min.js +++ b/lib/index.min.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).BarChart=e()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function t(t){return function(t){if(Array.isArray(t)){for(var e=0,i=new Array(t.length);e=t.x&&i.x<=t.x+t.w&&i.y<=t.y&&i.y>=t.y+t.h&&(o=e),function(t,e,i){t.fillStyle=i?y.bar.style.select:y.bar.style.default,t.fillRect(e.x,e.y,e.w,e.h)}(n.context,t,!1)}),~o&&function(t,e,i){var n=y.tooltip.mark.radius,o="".concat(y.tooltip.title).concat(y.data[i]);t.font="".concat(y.tooltip.font.size,"px ").concat(y.tooltip.font.family);var a=t.measureText(o).width,r=t.measureText(y.labels[i]).width,s=r-1*this.max_data*this.phyScale){var i=this.animation.bind(this);o.requestAnimationFrame()(i)}t.restore()},a}); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).BarChart=e()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function t(t){return function(t){if(Array.isArray(t)){for(var e=0,i=new Array(t.length);et.x&&i.xt.y+t.h&&i.yt.y&&i.y-1*t.max_abs_data*t.phyScale){var o=t.animation.bind(t);y.requestAnimationFrame()(o)}e.restore()},n}); \ No newline at end of file diff --git a/package.json b/package.json index 525b7e7..44b6815 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bar-chartjs", - "version": "1.0.1", + "version": "1.0.2", "description": "The bar-chart visualization plugin", "main": "lib/index.min.js", "directories": {