Question

当图表很小时（因为屏幕很小，小于1024x768），默认情况下会隐藏一些工具提示。无论图表的大小如何，我都希望在每列中显示所有工具提示。该示例显示了5个工具提示，但应显示7个工具提示。有没有办法改变这种行为？

tooltip: {
  valueSuffix: '°C',
  split: true,
  enabled: true,
  padding: 2,
  useHTML: true,
  pointFormatter: function () {                    
    return '<span style="color:'+this.series.color+'">'+this.series.name+'</span>: '+this.y
  }
}

Answer 1

要节省空间，请使用共享而不是拆分工具提示。我也制作了工具提示svg而不是html。缩放似乎更好。

  tooltip: {
    valueSuffix: '°C',
    split: false,
    shared: true,
    enabled: true,
    padding: 2,
    useHTML: false,
    pointFormatter: function() {
      return '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: ' + this.y + '<br/>'
    },

https://jsfiddle.net/blaird/go1eem4h/1/ }，

Answer 2

我想我找到了一个解决方案：根据图表的大小，我更新了工具提示的填充和字体大小。在我的情况下，当图形大于205px时，使用原始配置（填充2和字体11.5）。当205和170px之间更新为填充0和字体9.5，并且小于170px时使用工具提示共享

$("#container").resize(function () {
  if ($(this).height() < 205 && $(this).height() >= 170) {
    chart.update({
      tooltip: {
        shared: false,
        split: true,
        padding: 0,
        style: {
          fontSize: '9.5px'
        },
      }
    });
  } else if ($(this).height() < 170) {
    chart.update({
      tooltip: {
        shared: true,
        split: false,
        padding: 2,
        style: {
          fontSize: '11.5px'
        },
      }
    });
  } else {
    chart.update({
      tooltip: {
        shared: false,
        split: true,
        padding: 2,
        style: {
          fontSize: '11.5px'
        },
      }
    });
  }
});

如何显示所有工具提示在图表中分割为多个系列

2 个答案: