javascript - 如何在 highchart 工具提示中显示前 100 个字符，然后说 "See more .."？

Question

tooltip: {
    style: {
        whiteSpace: 'normal'
    },
    xDateFormat: '%b %e, %Y', //%a %H:%M
        useHTML: true,
        pointFormatter: function () {
        var ToolTippointFormathtm='';
        ToolTippointFormathtm += '<div class="noteContent" style="white-space:normal;">';
        ToolTippointFormathtm += '<div style="" class="more textLimit">' + this.noteText + '</div>';
        if(this.noteText.length>99){
            ToolTippointFormathtm += '<a data-series="'+this.series.index+'" href="javascript:;" class="seeMoreLink" onclick="fnMoreLess($(this))">See more</a>';
        }
        ToolTippointFormathtm += '</div>';
        return ToolTippointFormathtm;
    }
}

它显示在工具提示中，但是每当我尝试单击“查看更多”时，工具提示区域不会扩展，但文本会扩展。

Answer 1

我使用CSS切换来实现显示更多/更少。这里我使用了 div 和 p 标签，但为了获得最佳结果，您必须使用 ul li (列表标签)。此外，还必须有一个唯一的 ID，您可以从中获取 Highcharts 的点属性

<input type="checkbox" class="read-more-state" id="post-2" />
<label for="post-2" class="read-more-trigger"></label>

此处工具提示不展开，但出现滚动条

Fiddle演示

var chart = new Highcharts.Chart({

  chart: {
    renderTo: 'container',
  },
  tooltip: {
    backgroundColor: "rgba(255,255,255,0)",
    borderWidth: 0,
    shadow: false,
    useHTML: true,
    formatter: function() {
      full_lengthSt = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`
      string = "";
      if (full_lengthSt.length > 100) {
        string += '<div class="read-more-wrap"><p>' + full_lengthSt.substr(0, 100) + '</p>';
        string += '<p class="read-more-target">' + full_lengthSt.substr(100, full_lengthSt.length - 1) + '</p></div>  <label for="post-2" class="read-more-trigger"></label>'
      } else {
        string += '<div class="read-more-wrap"><p>' + full_lengthSt + '</p></div>'
      }
      return `<div class="MyChartTooltip">
  <input type="checkbox" class="read-more-state" id="post-2" />
  ` + string + `</div>`;
    }
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]

});

.highcharts-container {
  overflow: visible !important;
}

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked~.read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state~.read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked~.read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}

.MyChartTooltip {
  position: relative;
  z-index: 50;
  border: 2px solid rgb(0, 108, 169);
  border-radius: 5px;
  background-color: #ffffff;
  padding: 5px;
  font-size: 9pt;
  overflow: auto;
  height: 50px;
  width: 100px
}

.highcharts-tooltip {
  pointer-events: all !important;
}

<script type="text/javascript" src="https://code.highcharts.com/highcharts.src.js">
</script>
<div id="container" style="height: 300px"></div>