顶点条形图中标签名称 Y 轴的 Vue 工具提示

Question

如果字长太长，我想显示 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
    ]
}
]

   


[
{
    "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>

    
  



  
  
  





  

    

      
 
       

        
 
         
 
归档时间：
 
 
         
 
  4 年 前  
 
 
        
 
        
 
         
 
查看次数：
 
 
         
 
 1050 次  
 
 
        
 
        
 
         
 
最近记录：
 
 
         
 
4 年 前
 
 
        
 
       
      
 
    
    
    
    

      
相关归档
 
      
      
如何按比例调整图像大小/保持纵横比？ 146

      
      
javascript:pause setTimeout(); 113

      
      
gulp.run已弃用.我如何撰写任务？ 96

      
      
TypeScript中的EventTarget类型中不存在属性"value" 80

      
      
HTML  - 属性与属性 61

      
      
Mongoose的Typescript方式......？ 56

      
      
如何在带有angularjs的视图中使用ng-if值检查null？ 51

      
      
VueJS使用prop作为数据属性值 5

      
      
一旦 Vuex 中的一个动作完成，就从 store 中调用一个组件函数 3

      
      
如何使用过滤器搜索数组中对象的多个键值？ 2

      
    
    
    

      
难疑归档
 
      
      
为什么HTML认为"chucknorris"是一种颜色？ 7264

      
      
我应该将哪个"href"值用于JavaScript链接,"#"或"javascript:void(0)"？ 3980

      
      
将本地存储库分支重置为远程存储库HEAD 3488

      
      
何时在Java中使用LinkedList而不是ArrayList？ 2974

      
      
撤消git rebase 2965

      
      
将具有默认值的列添加到SQL Server中的现有表 2648

      
      
找到已安装的npm软件包的版本 2037

      
      
如何计算列表项的出现次数？ 1417

      
      
在Python中反转一个字符串 1288

      
      
如何完全卸载Node.js,并从头开始重新安装(Mac OS X) 1196