diff --git a/docs/views/barChart/api/barChart.md b/docs/views/barChart/api/barChart.md index fbf9b4f5c..92a2d3010 100644 --- a/docs/views/barChart/api/barChart.md +++ b/docs/views/barChart/api/barChart.md @@ -303,23 +303,46 @@ const chartOptions = { | fixedPosTop | Boolean | false | maxTip 위치를 최대값으로 고정 | | | showIndicator | Boolean | false | indicator 표시 여부 | | | indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상 | | +| tipStyle | Object | ([상세](#tipstyle)) | tip 스타일을 설정 + +##### etc. +| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | +| ------ | ------ | ---- | -----| --------- | | tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | | | tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | | +* 3.4 버전부터 없어지는 옵션입니다. #### selectItem | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | | --- | ---- | ----- |---------------------------------------------------| ----------| | use | Boolean | false | 차트 아이템 선택 기능 | | | useClick | Boolean | true | 클릭 이벤트 사용 여부 (v-model에 바인딩한 변수로만 컨트롤 하려 할때 false) | | -| showTextTip | Boolean | false | 선택한 위치의 TextTip(text 포함 화살표, 흡사 말풍선) 생성 여부 | | -| tipText | String | 'value' | 선택한 위치에 TextTip을 생성한다면 어떤 값 | 'value', 'label | -| showTip | Boolean | false | 선택한 위치의 Tip(화살표) 생성 여부 | | -| showIndicator | Boolean | false | 선택한 label의 indicator 표시 | | -| fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정 | | -| useApproximateValue | Boolean | false | 가까운 label을 선택 | | -| indicatorColor | Hex, RGB, RGBA Code(String)| '#000000' | indicator 색상 | | -| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | tip 배경색상 | | -| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | tip 글자 색상 | | +| showTextTip | Boolean | false | 선택한 위치의 TextTip(text 포함 화살표, 흡사 말풍선) 생성 여부 | | +| tipText | String | 'value' | 선택한 위치에 TextTip을 생성한다면 어떤 값 | 'value', 'label | +| showTip | Boolean | false | 선택한 위치의 Tip(화살표) 생성 여부 | | +| showIndicator | Boolean | false | 선택한 label의 indicator 표시 | | +| fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정 | | +| useApproximateValue | Boolean | false | 가까운 label을 선택 | | +| indicatorColor | Hex, RGB, RGBA Code(String)| '#000000' | indicator 색상 | | +| tipStyle | Object | ([상세](#tipstyle)) | tip 스타일을 설정 + +##### etc. +| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | +| ------ | ------ | ---- | -----| --------- | +| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | | +| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | | +* 3.4 버전부터 없어지는 옵션입니다. + +##### tipStyle +| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | +| ------ | ------ | ---- | -----| --------- | +| height | Number | 20 | tip 높이 | | +| background | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | | +| textColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | | +| fontSize | Number | 14 | tip 폰트 크기 | | +| fontFamily | String | 'Roboto' | tip 폰트 | | +| fontWeight | Number | 400 | tip 폰트 굵기 | 100, 200, 300, ... 900 | + #### selectLabel | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | diff --git a/docs/views/barChart/example/Event.vue b/docs/views/barChart/example/Event.vue index 094f868fe..f43c85aa6 100644 --- a/docs/views/barChart/example/Event.vue +++ b/docs/views/barChart/example/Event.vue @@ -83,12 +83,16 @@ selectItem: { use: true, showTextTip: true, - tipBackground: '#FF00FF', + tipStyle: { + background: '#FF00FF', + }, }, maxTip: { use: true, showTextTip: true, - tipBackground: '#FF0000', + tipStyle: { + background: '#FF0000', + }, }, }; diff --git a/docs/views/barChart/example/SelectLabel.vue b/docs/views/barChart/example/SelectLabel.vue index 37eec3bc2..d24a69163 100644 --- a/docs/views/barChart/example/SelectLabel.vue +++ b/docs/views/barChart/example/SelectLabel.vue @@ -173,7 +173,9 @@ export default { maxTip: { use: true, showTextTip: true, - tipBackground: '#FF0000', + tipStyle: { + background: '#FF0000', + }, }, }); const chartOptions2 = ref({ @@ -217,7 +219,9 @@ export default { maxTip: { use: true, showTextTip: true, - tipBackground: '#FF0000', + tipStyle: { + background: '#FF0000', + }, }, }); const chartOptions3 = ref({ @@ -261,7 +265,9 @@ export default { maxTip: { use: true, showTextTip: true, - tipBackground: '#FF0000', + tipStyle: { + background: '#FF0000', + }, }, }); const chartOptions4 = ref({ @@ -305,7 +311,9 @@ export default { maxTip: { use: true, showTextTip: true, - tipBackground: '#FF0000', + tipStyle: { + background: '#FF0000', + }, }, }); diff --git a/docs/views/barChart/example/Time.vue b/docs/views/barChart/example/Time.vue index 2caa02fdd..b200e9f55 100644 --- a/docs/views/barChart/example/Time.vue +++ b/docs/views/barChart/example/Time.vue @@ -48,8 +48,10 @@ }], maxTip: { use: true, - tipBackground: '#DBDBDB', - tipTextColor: '#000000', + tipStyle: { + background: '#DBDBDB', + textColor: '#000000', + }, }, }; diff --git a/docs/views/lineChart/api/lineChart.md b/docs/views/lineChart/api/lineChart.md index 87dc1bcbb..0d4749997 100644 --- a/docs/views/lineChart/api/lineChart.md +++ b/docs/views/lineChart/api/lineChart.md @@ -271,23 +271,45 @@ const chartOptions = { | fixedPosTop | Boolean | false | maxTip 위치를 최대값으로 고정 | | | showIndicator | Boolean | false | indicator 표시 여부 | | | indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상 | | +| tipStyle | Object | ([상세](#tipstyle)) | tip 스타일을 설정 + +##### etc. +| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | +| ------ | ------ | ---- | -----| --------- | | tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | | | tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | | +* 3.4 버전부터 없어지는 옵션입니다. #### selectItem | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | |---------------------| ---- |-----------|---------------------------------------------------| ----------| | use | Boolean | false | 차트 아이템 선택 기능 | | | useClick | Boolean | true | 클릭 이벤트 사용 여부 (v-model에 바인딩한 변수로만 컨트롤 하려 할때 false) | | -| showTextTip | Boolean | false | 선택한 위치의 TextTip(text 포함 화살표, 흡사 말풍선) 생성 여부 | | -| tipText | String | 'value' | 선택한 위치에 TextTip을 생성한다면 어떤 값 | 'value', 'label | -| showTip | Boolean | false | 선택한 위치의 Tip(화살표) 생성 여부 | | -| showIndicator | Boolean | false | 선택한 label의 indicator 표시 | | -| fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정 | | -| useApproximateValue | Boolean | false | 가까운 label을 선택 | | -| indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상 | | -| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | tip 배경색상 | | -| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | tip 글자 색상 | | +| showTextTip | Boolean | false | 선택한 위치의 TextTip(text 포함 화살표, 흡사 말풍선) 생성 여부 | | +| tipText | String | 'value' | 선택한 위치에 TextTip을 생성한다면 어떤 값 | 'value', 'label | +| showTip | Boolean | false | 선택한 위치의 Tip(화살표) 생성 여부 | | +| showIndicator | Boolean | false | 선택한 label의 indicator 표시 | | +| fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정 | | +| useApproximateValue | Boolean | false | 가까운 label을 선택 | | +| indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상 | | +| tipStyle | Object | ([상세](#tipstyle)) | tip 스타일을 설정 + +##### etc. +| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | +| ------ | ------ | ---- | -----| --------- | +| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | | +| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | | +* 3.4 버전부터 없어지는 옵션입니다. + +##### tipStyle +| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | +| ------ | ------ | ---- | -----| --------- | +| height | Number | 20 | tip 높이 | | +| background | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | | +| textColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | | +| fontSize | Number | 14 | tip 폰트 크기 | | +| fontFamily | String | 'Roboto' | tip 폰트 | | +| fontWeight | Number | 400 | tip 폰트 굵기 | 100, 200, 300, ... 900 | #### selectLabel | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | @@ -319,7 +341,6 @@ const chartOptions = { | fillColor | Hex, RGB, RGBA Code(String) | '#38ACEC' | 선택 영역 색상 | | | opacity | Number | 0.65 | 선택 영역 불투명도 | 0 ~ 1 | - ### 6. resize-timeout - Default : 0 - debounce 사용. 연속으로 이벤트가 발생한 경우, 마지막 이벤트가 끝난 시점을 기준으로 `주어진 시간 (resize-timeout)` 이후 콜백 실행 diff --git a/docs/views/lineChart/example/Event.vue b/docs/views/lineChart/example/Event.vue index e802daa5f..177d446d7 100644 --- a/docs/views/lineChart/example/Event.vue +++ b/docs/views/lineChart/example/Event.vue @@ -85,7 +85,9 @@ }, maxTip: { use: true, - tipBackground: '#FF00FF', + tipStyle: { + background: '#FF00FF', + }, }, }; diff --git a/docs/views/lineChart/example/Fill.vue b/docs/views/lineChart/example/Fill.vue index 8543f6d7d..3a813f072 100644 --- a/docs/views/lineChart/example/Fill.vue +++ b/docs/views/lineChart/example/Fill.vue @@ -67,8 +67,10 @@ use: true, showIndicator: true, indicatorColor: '#FF0000', - tipBackground: '#000000', - tipTextColor: '#FFFFFF', + tipStyle: { + background: '#000000', + textColor: '#FFFFFF', + }, }, }; diff --git a/docs/views/scatterChart/api/scatterChart.md b/docs/views/scatterChart/api/scatterChart.md index 6648ed711..97bf85116 100644 --- a/docs/views/scatterChart/api/scatterChart.md +++ b/docs/views/scatterChart/api/scatterChart.md @@ -227,10 +227,26 @@ const chartOptions = { | fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정 | | | useApproximateValue | Boolean | false | 가까운 label을 선택 | | | indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상 | | -| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | tip 배경색상 | | -| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | tip 글자 색상 | | +| tipStyle | Object | ([상세](#tipstyle)) | tip 스타일을 설정 | useSeriesOpacity | Boolean | false | 선택한 항목을 제외한 나머지 항목들에 반투명 효과 적용 여부 | | +##### etc. +| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | +| ------ | ------ | ---- | -----| --------- | +| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | | +| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | | +* 3.4 버전부터 없어지는 옵션입니다. + +##### tipStyle +| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | +| ------ | ------ | ---- | -----| --------- | +| height | Number | 20 | tip 높이 | | +| background | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | | +| textColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | | +| fontSize | Number | 14 | tip 폰트 크기 | | +| fontFamily | String | 'Roboto' | tip 폰트 | | +| fontWeight | Number | 400 | tip 폰트 굵기 | 100, 200, 300, ... 900 | + ### 4. resize-timeout - Default : 0 - debounce 사용. 연속으로 이벤트가 발생한 경우, 마지막 이벤트가 끝난 시점을 기준으로 `주어진 시간 (resize-timeout)` 이후 콜백 실행 diff --git a/src/components/chart/element/element.tip.js b/src/components/chart/element/element.tip.js index 07120b0a6..38ca9756e 100644 --- a/src/components/chart/element/element.tip.js +++ b/src/components/chart/element/element.tip.js @@ -366,8 +366,14 @@ const modules = { const { dp, value, text, opt, type, tipType, isSamePos, seriesOpt } = param; const arrowSize = 4; - const maxTipHeight = 20; const borderRadius = 4; + const { + fontSize, + fontFamily, + fontWeight, + height: maxTipHeight, + } = opt.tipStyle; + const textStyle = `normal normal ${fontWeight} ${fontSize}px ${fontFamily}`; let offset = 1; if (type === 'line') { @@ -400,7 +406,7 @@ const modules = { let maxTipType = 'center'; ctx.save(); - ctx.font = 'normal normal bold 14px Roboto'; + ctx.font = textStyle; const maxTipWidth = Math.round(Math.max(ctx.measureText(text).width + 12, 40)); if (!isHorizontal) { @@ -427,6 +433,7 @@ const modules = { arrowSize, borderRadius, text, + textStyle, }); } @@ -449,7 +456,8 @@ const modules = { */ showTextTip(param) { const isHorizontal = !!this.options.horizontal; - const { type, width, height, x, y, arrowSize, borderRadius, text, opt } = param; + const { type, width, height, x, y, arrowSize, borderRadius, text, opt, textStyle } = param; + const ctx = param.context; const sx = x - (width / 2); @@ -458,9 +466,9 @@ const modules = { const ey = y; ctx.save(); - ctx.font = 'normal normal bold 14px Roboto'; + ctx.font = textStyle; - ctx.fillStyle = opt.tipBackground; + ctx.fillStyle = opt.tipBackground ?? opt.tipStyle.background; ctx.shadowBlur = 0; ctx.beginPath(); @@ -499,8 +507,8 @@ const modules = { ctx.fill(); ctx.restore(); ctx.save(); - ctx.font = 'normal normal bold 14px Roboto'; - ctx.fillStyle = opt.tipTextColor; + ctx.font = textStyle; + ctx.fillStyle = opt.tipTextColor ?? opt.tipStyle.textColor; ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; ctx.fillText(`${text}`, x, sy + (height / 2)); @@ -521,7 +529,7 @@ const modules = { const cy = y - offset; ctx.save(); - ctx.fillStyle = opt.tipBackground; + ctx.fillStyle = opt.tipBackground ?? opt.tipStyle.background; ctx.beginPath(); ctx.moveTo(x, cy); if (isHorizontal) { diff --git a/src/components/chart/uses.js b/src/components/chart/uses.js index 60f19f023..a5a87aec2 100644 --- a/src/components/chart/uses.js +++ b/src/components/chart/uses.js @@ -98,8 +98,14 @@ const DEFAULT_OPTIONS = { fixedPosTop: false, showIndicator: false, indicatorColor: '#000000', - tipBackground: '#000000', - tipTextColor: '#FFFFFF', + tipStyle: { + height: 20, + background: '#000000', + textColor: '#FFFFFF', + fontSize: 14, + fontFamily: 'Roboto', + fontWeight: 400, + }, }, selectItem: { use: false, @@ -111,8 +117,14 @@ const DEFAULT_OPTIONS = { fixedPosTop: false, useApproximateValue: false, indicatorColor: '#000000', - tipBackground: '#000000', - tipTextColor: '#FFFFFF', + tipStyle: { + height: 20, + background: '#000000', + textColor: '#FFFFFF', + fontSize: 14, + fontFamily: 'Roboto', + fontWeight: 400, + }, useSeriesOpacity: false, }, selectLabel: {