레이블 이름 Y 축에 대한 꼭지 막대 차트의 Vue 도구 설명

레이블 이름 Y 축에 대한 꼭지 막대 차트의 Vue 도구 설명

단어 길이가 너무 길면 Vue 툴팁을 표시하거나 호버에 표시하려는 경우 레이블의 전체 이름을 표시해야 한다.연구를 많이 하려고 했지만 아무 효과가 없었다.

https://apexcharts.com/docs/multiline-text-and-line-breaks-in-axes-labels/# https://github.com/apexcharts/apexcharts.js/issues/2281.

사용자가 Y축 레이블에 올리면 전체 텍스트를 표시해야 해.

나는 막대 차트를 사용하고 있다.

여기 API로부터의 나의 답변이 있다.

[
{
    "name": "Meetings",
    "data": [
        15,
        05,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10
    ]
},
{
    "name": "R & D",
    "data": [
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10
    ]
}
]

   
  


   


    
// ****************  Sector Chart ***************** //

export default {
    data() {
        return {
          // teams progress
          teamProgressFilter: "week",
          teamsOverviewSeries: [],
          teamsOverviewOptions: {
            chart: {
              type: "bar",
              height: 456,
              stacked: true,
              stackType: "100%",
            },
           plotOptions: {
               bar: {
                   horizontal: true,
                   barHeight: "40%",
                   columnWidth: "60%",
               },
           },
           stroke: {
               width: 2,
                colors: ["#fff"],
           },
           title: {
             text: "",
           },
           xaxis: {
                 type:'category',
                 categories: [],           
                 labels: {
                     show: false,
                 },
              },
              yaxis: {
                   show: true,
                   labels: {
                       show: true,
                       align: 'left',
                       minWidth: 50,
                       maxWidth: 300,
                       style: {
                           fontSize: '12px',
                        },
                        offsetX: 10,
                        offsetY: 0,
                         rotate: 0,
                         title : "jhashvcshacas  sagfuasf ashdgaug ",
                         formatter: (value) => { 
                             return (value.length > 11)? 
                              value.slice(0,11)+'..':value
            
                         },
                       },
                     },
                     tooltip: {
                         x: {
                              show: true,
                         },
                     y: {
                          title: {
                                   formatter: (seriesName) => " 
                                   <span>" + seriesName + ":</span>",
                          },
                          formatter: function (val) {
                               return val + " hours";
                          },
                       },
                        marker: {
                             show: false,
                        },
                        onDataSetHover: {
                             highlightDataSeries: false,
                         },
                       },
                       fill: {
                           type: "pattern",
                           colors: ["#0081C1", "#FF776A", "#F7B01D"],
                               pattern: {
                                   opacity: 0.5,
                                    style: "slantedLines",
                               },
                        },
                        legend: {
                             position: "bottom",
                             horizontalAlign: "center",
                             markers: {
                                 radius: 9,
                                  fillColors: ["#0081C1", "#FF776A", "#F7B01D"],
                              },
                           },
                           dataLabels: {
                               textAnchor: "end",
                               style: {
                                   fontSize: "12px",
                                   fontFamily: "Source Sans Pro",
                                   colors: ["#0684C3", "#FF776A", "#F7B325"],
                                },
                                background: {
                                    enabled: true,
                                     borderRadius: 3,
                                    opacity: 1,
                                },
                              },
                             },
                           };
                         },
                         methods: {
                              loadTeamOverview() {
                                  return [
                                        {
                                            "name": "Meetings",
                                            "data": [
                                                15,
                                                05,
                                                10,
                                                10,
                                                10,
                                                10,
                                                10,
                                                10,
                                                10,
                                                10
                                            ]
                                        },
                                        {
                                            "name": "R & D",
                                            "data": [
                                                10,
                                                10,
                                                10,
                                                10,
                                                10,
                                                10,
                                                10,
                                                10,
                                                10,
                                                10
                                            ]
                                        }
                                        ];
                        },
                        filtered() {
                        this.loadTeamOverview();
                        },
                        departmentArray(departments) {
                        return departments.map((dept) => dept.department);
                        //return departments.map((dept) => this.convertToArray(dept.department));
                        },
                    },
                    
                    created: function () {
                        this.loadTeamOverview();
                    },
                    };

    
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.29.0/apexcharts.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.29.0/apexcharts.min.js"></script>

   

  

<md-card class="bpmt_card mb-15">
  <div id="chartTeamProgress">
    <apexchart
      ref="realtimeChart"
      type="bar"
      height="400"
      :options="teamsOverviewOptions"
      :series="teamsOverviewSeries"
    ></apexchart>
  </div>
</md-card>

참조URL: https://stackoverflow.com/questions/69768853/vue-tool-tip-in-apex-bar-chart-for-label-name-y-axis