diff --git a/docs/views/barChart/api/barChart.md b/docs/views/barChart/api/barChart.md index 5b0029b50..f57f0ef65 100644 --- a/docs/views/barChart/api/barChart.md +++ b/docs/views/barChart/api/barChart.md @@ -132,6 +132,7 @@ const chartData = { ##### labelStyle | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | |-----|------|-------|-----|-----| +| show | Boolean | true | label 표시 여부 | true / false | | fontSize | Number | 12 | 글자 크기 | | | color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 | | | fontFamily | String | 'Roboto' | 폰트 | | diff --git a/docs/views/lineChart/api/lineChart.md b/docs/views/lineChart/api/lineChart.md index 3ebd09c2c..d60a3cbf6 100644 --- a/docs/views/lineChart/api/lineChart.md +++ b/docs/views/lineChart/api/lineChart.md @@ -99,6 +99,7 @@ const chartData = ##### labelStyle | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | |-----|------|-------|-----|-----| +| show | Boolean | true | label 표시 여부 | true / false | | fontSize | Number | 12 | 글자 크기 | | | color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 | | | fontFamily | String | 'Roboto' | 폰트 | | diff --git a/docs/views/scatterChart/api/scatterChart.md b/docs/views/scatterChart/api/scatterChart.md index 09319420f..0768e1948 100644 --- a/docs/views/scatterChart/api/scatterChart.md +++ b/docs/views/scatterChart/api/scatterChart.md @@ -92,6 +92,7 @@ const chartData = ##### labelStyle | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | |-----|------|-------|-----|-----| +| show | Boolean | true | label 표시 여부 | true / false | | fontSize | Number | 12 | 글자 크기 | | | color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 | | | fontFamily | String | 'Roboto' | 폰트 | | diff --git a/package.json b/package.json index 7800675c7..697812038 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "evui", - "version": "3.1.39", + "version": "3.1.40", "description": "A EXEM Library project", "author": "exem ", "license": "MIT", diff --git a/src/components/chart/chart.core.js b/src/components/chart/chart.core.js index 3eed70bee..ce8c0cda8 100644 --- a/src/components/chart/chart.core.js +++ b/src/components/chart/chart.core.js @@ -441,38 +441,42 @@ class EvChart { let lh = 0; axesX.forEach((axis, index) => { - lw = range.x[index].size.width + labelBuffer.width; - lh = range.x[index].size.height + labelBuffer.height; + if (axis.labelStyle?.show) { + lw = range.x[index].size.width + labelBuffer.width; + lh = range.x[index].size.height + labelBuffer.height; - if (axis.position === 'bottom') { - if (lh > labelOffset.bottom) { - labelOffset.bottom = lh; - } - } else if (axis.position === 'top') { - if (lh > labelOffset.top) { - labelOffset.top = lh; + if (axis.position === 'bottom') { + if (lh > labelOffset.bottom) { + labelOffset.bottom = lh; + } + } else if (axis.position === 'top') { + if (lh > labelOffset.top) { + labelOffset.top = lh; + } } - } - labelOffset.left = (lw / 2) > labelOffset.left ? (lw / 2) : labelOffset.left; - labelOffset.right = (lw / 2) > labelOffset.right ? (lw / 2) : labelOffset.right; + labelOffset.left = (lw / 2) > labelOffset.left ? (lw / 2) : labelOffset.left; + labelOffset.right = (lw / 2) > labelOffset.right ? (lw / 2) : labelOffset.right; + } }); axesY.forEach((axis, index) => { - lw = Math.max(range.y[index].size.width + labelBuffer.width, 42 + labelBuffer.width); + if (axis.labelStyle?.show) { + lw = Math.max(range.y[index].size.width + labelBuffer.width, 42 + labelBuffer.width); - if (axis.position === 'left') { - if (lw > labelOffset.left) { - labelOffset.left = lw; - } - } else if (axis.position === 'right') { - if (lw > labelOffset.right) { - labelOffset.right = lw; + if (axis.position === 'left') { + if (lw > labelOffset.left) { + labelOffset.left = lw; + } + } else if (axis.position === 'right') { + if (lw > labelOffset.right) { + labelOffset.right = lw; + } } - } - labelOffset.top = (lh / 2) > labelOffset.top ? (lh / 2) : labelOffset.top; - labelOffset.bottom = (lh / 2) > labelOffset.bottom ? (lh / 2) : labelOffset.bottom; + labelOffset.top = (lh / 2) > labelOffset.top ? (lh / 2) : labelOffset.top; + labelOffset.bottom = (lh / 2) > labelOffset.bottom ? (lh / 2) : labelOffset.bottom; + } }); return labelOffset; diff --git a/src/components/chart/helpers/helpers.constant.js b/src/components/chart/helpers/helpers.constant.js index aa1c21243..4ae8a2b34 100644 --- a/src/components/chart/helpers/helpers.constant.js +++ b/src/components/chart/helpers/helpers.constant.js @@ -87,6 +87,7 @@ export const AXIS_OPTION = { interval: null, decimalPoint: null, labelStyle: { + show: true, fontSize: 12, color: '#25262E', fontFamily: 'Roboto', diff --git a/src/components/chart/scale/scale.js b/src/components/chart/scale/scale.js index d7023a5cc..b41626470 100644 --- a/src/components/chart/scale/scale.js +++ b/src/components/chart/scale/scale.js @@ -220,69 +220,71 @@ class Scale { return; } - const labelGap = (endPoint - startPoint) / steps; - const ticks = []; - let labelCenter = null; - let linePosition = null; + if (this.labelStyle?.show) { + const labelGap = (endPoint - startPoint) / steps; + const ticks = []; + let labelCenter = null; + let linePosition = null; + + ctx.strokeStyle = this.gridLineColor; + ctx.lineWidth = 1; + aliasPixel = Util.aliasPixel(ctx.lineWidth); - ctx.strokeStyle = this.gridLineColor; - ctx.lineWidth = 1; - aliasPixel = Util.aliasPixel(ctx.lineWidth); + let labelText; + for (let ix = 0; ix <= steps; ix++) { + ctx.beginPath(); + ticks[ix] = axisMin + (ix * stepValue); - let labelText; - for (let ix = 0; ix <= steps; ix++) { - ctx.beginPath(); - ticks[ix] = axisMin + (ix * stepValue); + labelCenter = Math.round(startPoint + (labelGap * ix)); + linePosition = labelCenter + aliasPixel; + labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix])); - labelCenter = Math.round(startPoint + (labelGap * ix)); - linePosition = labelCenter + aliasPixel; - labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix])); + let labelPoint; - let labelPoint; + if (this.type === 'x') { + labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10; + ctx.fillText(labelText, labelCenter, labelPoint); + if (options?.selectItem?.showLabelTip && hitInfo?.label && !this.options?.horizontal) { + const selectedLabel = this.getLabelFormat( + Math.min(axisMax, hitInfo.label + (0 * stepValue)), + ); + if (selectedLabel === labelText) { + const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width); + Util.showLabelTip({ + ctx: this.ctx, + width: Math.round(ctx.measureText(selectedLabel).width) + 10, + height, + x: labelCenter, + y: labelPoint + (height - 2), + borderRadius: 2, + arrowSize: 3, + text: labelText, + backgroundColor: options?.selectItem?.labelTipStyle?.backgroundColor, + textColor: options?.selectItem?.labelTipStyle?.textColor, + }); + } + } + if (ix !== 0 && this.showGrid) { + ctx.moveTo(linePosition, offsetPoint); + ctx.lineTo(linePosition, offsetCounterPoint); + } + } else { + labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10; + ctx.fillText(labelText, labelPoint, labelCenter); - if (this.type === 'x') { - labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10; - ctx.fillText(labelText, labelCenter, labelPoint); - if (options?.selectItem?.showLabelTip && hitInfo?.label && !this.options?.horizontal) { - const selectedLabel = this.getLabelFormat( - Math.min(axisMax, hitInfo.label + (0 * stepValue)), - ); - if (selectedLabel === labelText) { - const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width); - Util.showLabelTip({ - ctx: this.ctx, - width: Math.round(ctx.measureText(selectedLabel).width) + 10, - height, - x: labelCenter, - y: labelPoint + (height - 2), - borderRadius: 2, - arrowSize: 3, - text: labelText, - backgroundColor: options?.selectItem?.labelTipStyle?.backgroundColor, - textColor: options?.selectItem?.labelTipStyle?.textColor, - }); + if (ix === steps) { + linePosition += 1; } - } - if (ix !== 0 && this.showGrid) { - ctx.moveTo(linePosition, offsetPoint); - ctx.lineTo(linePosition, offsetCounterPoint); - } - } else { - labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10; - ctx.fillText(labelText, labelPoint, labelCenter); - if (ix === steps) { - linePosition += 1; + if (ix !== 0 && this.showGrid) { + ctx.moveTo(offsetPoint, linePosition); + ctx.lineTo(offsetCounterPoint, linePosition); + } } - if (ix !== 0 && this.showGrid) { - ctx.moveTo(offsetPoint, linePosition); - ctx.lineTo(offsetCounterPoint, linePosition); - } + ctx.stroke(); + ctx.closePath(); } - - ctx.stroke(); - ctx.closePath(); } // Draw plot lines and plot bands diff --git a/src/components/chart/scale/scale.step.js b/src/components/chart/scale/scale.step.js index 93bfa0f81..5c41ff282 100644 --- a/src/components/chart/scale/scale.step.js +++ b/src/components/chart/scale/scale.step.js @@ -75,98 +75,105 @@ class StepScale extends Scale { const offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)]; const maxWidth = chartRect.chartWidth / (this.labels.length + 2); - // label font 설정 - ctx.font = Util.getLabelStyle(this.labelStyle); + if (this.labelStyle?.show) { + // label font 설정 + ctx.font = Util.getLabelStyle(this.labelStyle); - if (this.type === 'x') { - ctx.textAlign = 'center'; - ctx.textBaseline = this.position === 'top' ? 'bottom' : 'top'; - } else { - ctx.textAlign = this.position === 'left' ? 'right' : 'left'; - ctx.textBaseline = 'middle'; - } + if (this.type === 'x') { + ctx.textAlign = 'center'; + ctx.textBaseline = this.position === 'top' ? 'bottom' : 'top'; + } else { + ctx.textAlign = this.position === 'left' ? 'right' : 'left'; + ctx.textBaseline = 'middle'; + } - ctx.fillStyle = this.labelStyle.color; - ctx.lineWidth = 1; - const aliasPixel = Util.aliasPixel(ctx.lineWidth); - - ctx.beginPath(); - ctx.strokeStyle = this.axisLineColor; - if (this.type === 'x') { - ctx.moveTo(startPoint, offsetPoint + aliasPixel); - ctx.lineTo(endPoint, offsetPoint + aliasPixel); - } else { - ctx.moveTo(offsetPoint + aliasPixel, startPoint); - ctx.lineTo(offsetPoint + aliasPixel, endPoint); - } - ctx.stroke(); + ctx.fillStyle = this.labelStyle.color; + ctx.lineWidth = 1; + const aliasPixel = Util.aliasPixel(ctx.lineWidth); - if (steps === 0) { - return; - } + ctx.beginPath(); + ctx.strokeStyle = this.axisLineColor; + if (this.type === 'x') { + ctx.moveTo(startPoint, offsetPoint + aliasPixel); + ctx.lineTo(endPoint, offsetPoint + aliasPixel); + } else { + ctx.moveTo(offsetPoint + aliasPixel, startPoint); + ctx.lineTo(offsetPoint + aliasPixel, endPoint); + } + ctx.stroke(); - const labelGap = (endPoint - startPoint) / labels.length; - let labelCenter = null; - let linePosition = null; + if (steps === 0) { + return; + } - ctx.beginPath(); - ctx.strokeStyle = this.gridLineColor; + const labelGap = (endPoint - startPoint) / labels.length; + let labelCenter = null; + let linePosition = null; - let labelText; - let labelPoint; + ctx.beginPath(); + ctx.strokeStyle = this.gridLineColor; - labels.forEach((item, index) => { - labelCenter = Math.round(startPoint + (labelGap * index)); - linePosition = labelCenter + aliasPixel; - labelText = this.getLabelFormat(item, maxWidth); + let labelText; + let labelPoint; - if (this.type === 'x') { - labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10; - ctx.fillText(labelText, labelCenter + (labelGap / 2), labelPoint); - if (this.options?.selectItem?.showLabelTip && hitInfo?.label && !this.options?.horizontal) { - const selectedLabel = hitInfo.label; - if (selectedLabel === labelText) { - const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width); - Util.showLabelTip({ - ctx: this.ctx, - width: Math.round(ctx.measureText(selectedLabel).width) + 10, - height, - x: labelCenter + (labelGap / 2), - y: labelPoint + (height - 2), - borderRadius: 2, - arrowSize: 3, - text: labelText, - backgroundColor: this.options?.selectItem?.labelTipStyle?.backgroundColor, - textColor: this.options?.selectItem?.labelTipStyle?.textColor, - }); + labels.forEach((item, index) => { + labelCenter = Math.round(startPoint + (labelGap * index)); + linePosition = labelCenter + aliasPixel; + labelText = this.getLabelFormat(item, maxWidth); + + if (this.type === 'x') { + labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10; + ctx.fillText(labelText, labelCenter + (labelGap / 2), labelPoint); + + if (this.options?.selectItem?.showLabelTip + && hitInfo?.label + && !this.options?.horizontal + ) { + const selectedLabel = hitInfo.label; + if (selectedLabel === labelText) { + const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width); + Util.showLabelTip({ + ctx: this.ctx, + width: Math.round(ctx.measureText(selectedLabel).width) + 10, + height, + x: labelCenter + (labelGap / 2), + y: labelPoint + (height - 2), + borderRadius: 2, + arrowSize: 3, + text: labelText, + backgroundColor: this.options?.selectItem?.labelTipStyle?.backgroundColor, + textColor: this.options?.selectItem?.labelTipStyle?.textColor, + }); + } } - } - if (index > 0 && this.showGrid) { - ctx.moveTo(linePosition, offsetPoint); - ctx.lineTo(linePosition, offsetCounterPoint); - } - } else { - labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10; - ctx.fillText(labelText, labelPoint, labelCenter + (labelGap / 2)); + if (index > 0 && this.showGrid) { + ctx.moveTo(linePosition, offsetPoint); + ctx.lineTo(linePosition, offsetCounterPoint); + } + } else { + labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10; + ctx.fillText(labelText, labelPoint, labelCenter + (labelGap / 2)); - if (index > 0 && this.showGrid) { - ctx.moveTo(offsetPoint, linePosition); - ctx.lineTo(offsetCounterPoint, linePosition); + if (index > 0 && this.showGrid) { + ctx.moveTo(offsetPoint, linePosition); + ctx.lineTo(offsetCounterPoint, linePosition); + } } - } - ctx.stroke(); - }); + ctx.stroke(); + }); - ctx.closePath(); + ctx.closePath(); + } // draw plot lines and plot bands if (this.plotBands?.length || this.plotLines?.length) { - const padding = aliasPixel + 1; + const padding = Util.aliasPixel(ctx.lineWidth) + 1; const minX = aPos.x1 + padding; const maxX = aPos.x2; const minY = aPos.y1 + padding; const maxY = aPos.y2; + const labelGap = (endPoint - startPoint) / (this.labelStyle.show ? labels.length : 1); this.plotBands?.forEach((plotBand) => { if (!plotBand.from && !plotBand.to) {