[#1087] Bar Chart > showValue옵션에 decimalPoint 추가

################################### 1. decimalPoint 옵션 추가 2. 관련 문서 수정 3. 관련 예제코드 수정
ex-em · Mar 10, 2022 · 3cddd14 · 3cddd14
1 parent 13338bf
commit 3cddd14
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/docs/views/barChart/api/barChart.md b/docs/views/barChart/api/barChart.md
@@ -61,6 +61,7 @@ const chartData = {
 | fontSize | Number | 12 | 글자 크기 | |
 | align | String | 'end' | tooltip 테두리 색상  | 'start', 'center', 'end', 'out' |
 | formatter | function | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (value) => value + '%' |
+| decimalPoint | Number | 0 | 소수점 자릿수  |  |
 
 #### data example
 ```
@@ -122,6 +123,9 @@ const chartData = {
       - 미지정 시 Chart 내부에서 해당 Axis 데이터의 max/min value를 기반으로 interval을 구함
    - Linear Type의 Axis Label은 각 숫자 단위에 맞춰 'K', 'M', 'G'로 숫자를 변환하여 보여줌
       - 예를 들어, Label에 필요한 값이 1,500일 경우 '1.5K'로 표기
+   - decimalPoint
+     - 소수점 자릿수 표시 (default: 0)
+
 
 ##### time type
    - interval (Axis Label 표기를 위한 interval)
@@ -135,7 +139,9 @@ const chartData = {
    - logarithmic Type Axis는 Axis의 min max를 로그로 계산하여 자동으로 추가 buffer값을 제공
    - Linear Type의 Axis Label은 각 숫자 단위에 맞춰 'K', 'M', 'G'로 숫자를 변환하여 보여줌
       - 예를 들어, Label에 필요한 값이 1,500일 경우 '1.5K'로 표
-
+   - decimalPoint
+       - 소수점 자릿수 표시 (default: 0)
+
 ##### step type
    - timeMode
       - Step Axis를 Time 기반으로 변경, default: false

diff --git a/docs/views/barChart/example/Column.vue b/docs/views/barChart/example/Column.vue
@@ -11,7 +11,7 @@
       const chartData = {
         series: {
           series1: { name: 'series#1', color: '#FEC64F', showValue: { use: true } },
-          series2: { name: 'series#2', color: '#48D1CC', showValue: { use: true } },
+          series2: { name: 'series#2', color: '#48D1CC', showValue: { use: true, decimalPoint: 1 } },
         },
         labels: [
           'value1',
@@ -22,7 +22,7 @@
         ],
         data: {
           series1: [100, 150, 51, 150, { value: 350, color: '#FF0000' }],
-          series2: [150, 100, 151, 50, 250],
+          series2: [150.0, 100.2, 151.433, 50.221, 250.123],
         },
       };
 

diff --git a/src/components/chart/element/element.bar.js b/src/components/chart/element/element.bar.js
@@ -332,7 +332,7 @@ class Bar {
    */
   drawValueLabels({ context, data, positions, isHighlight }) {
     const isHorizontal = this.isHorizontal;
-    const { fontSize, textColor, align, formatter } = this.showValue;
+    const { fontSize, textColor, align, formatter, decimalPoint } = this.showValue;
     const { x, y, w, h } = positions;
     const ctx = context;
 
@@ -361,7 +361,7 @@ class Bar {
     }
 
     if (!formatter || typeof formattedTxt !== 'string') {
-      formattedTxt = Util.labelSignFormat(value);
+      formattedTxt = Util.labelSignFormat(value, decimalPoint);
     }
 
     const vw = Math.round(ctx.measureText(formattedTxt).width);

diff --git a/src/components/chart/helpers/helpers.constant.js b/src/components/chart/helpers/helpers.constant.js
@@ -59,6 +59,7 @@ export const BAR_OPTION = {
     fontSize: 12,
     textColor: '#000000',
     formatter: null,
+    decimalPoint: 0,
   },
 };