如何在highcharts中通过悬停查看截断的文本?

oipij1gg  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(180)

我使用的是highcharts-react-official软件包,有时候我的图表文本太长,需要被截断,在这种情况下,文本以“......"结尾。
我希望能够看到全文,如果我把鼠标悬停在它上面。这是可能的,无论如何?
编辑:见图,被截断的文字是从上数第三个。
编辑:我实际上发现“工具提示”选项可以解决这个问题,但我想知道是否有可能配置工具提示,使它只出现在文本被截断?
My chart

ar7v8xwq

ar7v8xwq1#

可能的解决方案是根据标签文本的长度,在格式化程序中设置自定义“省略号”。

dataLabels: {
    enabled: true,
    inside: true,
    formatter: function() {
      let name = this.key;
      if (name.length > 10) {
        name = name.substring(0, 8) + '...';
      }
      return name;
    }
  },

然后,你可以很容易地检查哪个标签有缩写文本。要检查它并设置悬停时的工具提示,请使用point.mouseOver()事件。

point: {
    events: {
      mouseOver: function() {
        let point = this;
        let name = point.options.name;
        if (name.length > 10) {
          point.series.chart.update({
            tooltip: {
              enabled: true
            }
          });
        }
      },
      mouseOut: function() {
        this.series.chart.update({
          tooltip: {
            enabled: false
          }
        });
      }
    }
  }

API参考:https://api.highcharts.com/highcharts/series.column.events.mouseOverhttps://api.highcharts.com/highcharts/series.column.events.mouseOut
演示:https://jsfiddle.net/BlackLabel/c4qezstf/

相关问题