[#1090] Pie Chart > showValue 옵션 추가

docs/views/barChart/api/barChart.md

@@ -57,7 +57,7 @@ const chartData = {
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | use | Boolean | false | data label 표시 여부 | true /false |
-| fontColor | Hex, RGB, RGBA Code(String) | '#000000' | 글자 색상  | |
+| textColor | Hex, RGB, RGBA Code(String) | '#000000' | 글자 색상  | |
 | fontSize | Number | 12 | 글자 크기 | |
 | align | String | 'end' | tooltip 테두리 색상  | 'start', 'center', 'end', 'out' |
 | formatter | function | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (value) => value + '%' |

docs/views/pieChart/api/pieChart.md

@@ -34,6 +34,7 @@ const selectedItem = ref({
   | type | String | 'bar' | 시리즈에 해당하는 데이터 표현 방식 | 'bar', 'pie', 'line', 'scatter' |
   | color | Hex, RGB, RGBA Code(String) | COLOR[index] | 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 |  |
   | stroke | Object | { use: true, color: '#FFFFFF', lineWidth: 2 } | 차트의 테두리선 표시 여부 및 색상, 두께를 설정하는 옵션 | |
+  | showValue | Object | ([상세](#showvalue)) | 조각 위에 값 표시 여부 및 속성 |  |
 
 #### data example
 ```
@@ -48,6 +49,14 @@ const chartData =
   },
 };
 ```
+#### showValue
+| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
+| --- | ---- | ----- | --- | ----------|
+| use | Boolean | false | data label 표시 여부 | true /false |
+| textColor | Hex, RGB, RGBA Code(String) | '#000000' | 글자 색상  | |
+| fontSize | Number | 12 | 글자 크기 | |
+| formatter | function | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (value) => value + '%' |
+
 
 ### 3. options 
   | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |

docs/views/pieChart/example/ShowValue.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="case">
+    <ev-chart
+      :data="chartData"
+      :options="chartOptions"
+    />
+    <div class="description">
+      <div class="row">
+        <div class="row-item">
+          <span class="item-title">
+            Hole 사이즈
+          </span>
+          <ev-input-number
+            v-model="doughnutHoleSize"
+            :step="0.1"
+            :precision="1"
+            :min="0"
+            :max="0.8"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="row-item">
+          <span class="item-title">
+            폰트 크기
+          </span>
+          <ev-input-number
+            v-model="fontSize"
+            :step="1"
+            :precision="0"
+            :min="1"
+            :max="30"
+          />
+        </div>
+        <div class="row-item">
+          <span class="item-title">
+            폰트 컬러
+          </span>
+          <ev-text-field v-model="textColor"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, ref } from 'vue';
+
+  export default {
+    setup() {
+      const doughnutHoleSize = ref(0);
+      const fontSize = ref(12);
+      const textColor = ref('#000000');
+
+      const chartData = reactive({
+        series: {
+          series1: { name: 'series#1', showValue: { use: true, fontSize, textColor } },
+          series2: { name: 'series#2', showValue: { use: true, fontSize, textColor } },
+          series3: { name: 'series#3', showValue: { use: true, fontSize, textColor } },
+          series4: { name: 'series#4', showValue: { use: true, fontSize, textColor } },
+          series5: { name: 'series#5', showValue: { use: true, fontSize, textColor } },
+          series6: { name: 'series#6', showValue: { use: true, fontSize, textColor } },
+          series7: { name: 'series#7', showValue: { use: true, fontSize, textColor } },
+          series8: { name: 'series#8', showValue: { use: true, fontSize, textColor } },
+          series9: { name: 'series#9', showValue: { use: true, fontSize, textColor } },
+          series10: { name: 'series#10', showValue: { use: true, fontSize, textColor } },
+        },
+        data: {
+          series1: [1],
+          series2: [4],
+          series3: [9],
+          series4: [16],
+          series5: [25],
+          series6: [36],
+          series7: [49],
+          series8: [64],
+          series9: [81],
+          series10: [100],
+        },
+      });
+
+      const chartOptions = reactive({
+        type: 'pie',
+        width: '100%',
+        title: {
+          text: 'Chart Title',
+          show: true,
+        },
+        legend: {
+          show: true,
+          position: 'right',
+        },
+        doughnutHoleSize,
+      });
+
+      return {
+        chartData,
+        chartOptions,
+        doughnutHoleSize,
+        fontSize,
+        textColor,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .row {
+    display: flex;
+    margin-top: 15px;
+
+    .row-item {
+      display: flex;
+      margin-right: 30px;
+
+      .item-title {
+        line-height: 33px;
+        margin-right: 3px;
+        min-width: 50px;
+      }
+
+      .ev-text-field, .ev-input-number, .ev-select {
+        width: auto;
+      }
+    }
+  }
+</style>

docs/views/pieChart/props.js

@@ -8,6 +8,8 @@ import Sunburst from './example/Sunburst';
 import SunburstRaw from '!!raw-loader!./example/Sunburst';
 import Event from './example/Event';
 import EventRaw from '!!raw-loader!./example/Event';
+import ShowValue from './example/ShowValue';
+import ShowValueRaw from '!!raw-loader!./example/ShowValue';
 
 export default {
   mdText,
@@ -27,6 +29,11 @@ export default {
       component: Sunburst,
       parsedData: parseComponent(SunburstRaw),
     },
+    ShowValue: {
+      description: 'ShowValue 옵션 설정으로 value 값을 표시합니다.',
+      component: ShowValue,
+      parsedData: parseComponent(ShowValueRaw),
+    },
     Event: {
       description: 'Click, Double Click 등 이벤트 등록이 가능합니다.',
       component: Event,

src/components/chart/element/element.pie.js

@@ -24,6 +24,7 @@ class Pie {
     this.centerX = 0;
     this.centerY = 0;
     this.radius = 0;
+    this.doughnutHoleSize = 0;
     this.startAngle = 0;
     this.endAngle = 0;
     this.slice = null;
@@ -45,6 +46,7 @@ class Pie {
     const slice = new Path2D();
 
     const radius = this.isSelect ? this.radius + 5 : this.radius;
+    const doughnutHoleRadius = this.radius * this.doughnutHoleSize;
 
     const color = this.color;
     const noneDownplayOpacity = color.includes('rgba') ? Util.getOpacity(color) : 1;
@@ -64,6 +66,10 @@ class Pie {
       ctx.stroke(slice);
     }
 
+    if (this.showValue?.use) {
+      this.drawValueLabels(ctx, doughnutHoleRadius);
+    }
+
     ctx.closePath();
 
     this.slice = slice;
@@ -101,6 +107,7 @@ class Pie {
   itemHighlight(item, context) {
     const ctx = context;
     const radius = this.isSelect ? this.radius + 5 : this.radius;
+    const doughnutHoleRadius = this.radius * this.doughnutHoleSize;
 
     ctx.save();
     ctx.shadowOffsetX = 0;
@@ -116,7 +123,62 @@ class Pie {
     ctx.arc(this.centerX, this.centerY, radius, this.startAngle, this.endAngle);
     ctx.lineTo(this.centerX, this.centerY);
     ctx.fill();
+
+    if (this.showValue?.use) {
+      this.drawValueLabels(ctx, doughnutHoleRadius);
+    }
+
     ctx.closePath();
+    ctx.restore();
+  }
+
+  /**
+   * Draw value label if series 'use' of showValue option is true
+   *
+   * @param context           canvas context
+   */
+  drawValueLabels(context) {
+    const { fontSize, textColor, formatter } = this.showValue;
+    const ctx = context;
+
+    ctx.save();
+    ctx.beginPath();
+
+    ctx.font = `normal normal normal ${fontSize}px Roboto`;
+    ctx.fillStyle = textColor;
+    ctx.lineWidth = 1;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    const value = this.data.o;
+
+    let formattedTxt;
+    if (formatter) {
+      formattedTxt = formatter(value);
+    }
+
+    if (!formatter || typeof formattedTxt !== 'string') {
+      formattedTxt = Util.labelSignFormat(value);
+    }
+
+    const ratio = 1.8;
+    const radius = this.radius - this.doughnutHoleSize;
+    const innerAngle = ((this.endAngle - this.startAngle) * 180) / Math.PI;
+    const valueHeight = fontSize + 4;
+    const valueWidth = Math.round(ctx.measureText(formattedTxt).width);
+
+    if (innerAngle >= valueWidth * ratio
+      && innerAngle >= valueHeight * ratio
+      && radius >= valueWidth * ratio
+      && radius >= valueHeight * ratio
+    ) {
+      const halfRadius = (radius / 2) + this.doughnutHoleSize;
+      const centerAngle = ((this.endAngle - this.startAngle) / 2) + this.startAngle;
+      const xPos = halfRadius * Math.cos(centerAngle) + this.centerX;
+      const yPos = halfRadius * Math.sin(centerAngle) + this.centerY;
+
+      ctx.fillText(formattedTxt, xPos, yPos);
+    }
 
     ctx.restore();
   }

src/components/chart/helpers/helpers.constant.js

@@ -70,6 +70,12 @@ export const PIE_OPTION = {
     color: '#FFFFFF',
     lineWidth: 2,
   },
+  showValue: {
+    use: false,
+    fontSize: 12,
+    textColor: '#000000',
+    formatter: null,
+  },
 };
 
 export const AXIS_OPTION = {

src/components/chart/plugins/plugins.pie.js

@@ -75,6 +75,7 @@ const modules = {
             series.centerX = centerX;
             series.centerY = centerY;
             series.radius = radius;
+            series.doughnutHoleSize = radius * (pieOption.doughnutHoleSize ?? 0);
             series.startAngle = startAngle;
             series.endAngle = endAngle;
             series.data = { o: value };
@@ -166,6 +167,7 @@ const modules = {
             series.centerX = centerX;
             series.centerY = centerY;
             series.radius = radius;
+            series.doughnutHoleSize = radius * (pieOption.doughnutHoleSize ?? 0);
             series.startAngle = slice.sa;
             series.endAngle = slice.ea;
             series.data = { o: slice.value };