javascript - 工具提示中的图表未完全呈现

Question

我生成了一个带有图表的工具提示。

tooltip: {
    borderRadius: 15,
    borderWidth: 0,
    shadow: false,
    enabled: true,
    backgroundColor: 'none',
    useHTML: true,
    shared: true,
    formatter: function() {
        var div = document.createElement('div');

        Highcharts.chart(div, {
            chart: {
                height: 300,
                width: 300
            },
            title: {
                text: 'Title'
            },
            series: [
                {
                    data: [10, 20],
                    color: 'red'
                },
                {
                    data: [20, 10],
                    color: 'green'
                }
            ],
            yAxis: {
                title: {
                    text: 'Quantity'
                }
            }
        });

        return div.innerHTML;
    }
}

真实数据示例

主图为折线类型。工具提示图表是 column 类型。

虚拟数据示例

主图为折线类型。工具提示图表也是 line 类型。您可能会看到半可见的红色和绿色符号。它们要么被某物隐藏(我正试图弄清楚它是什么)，要么突然停止渲染(我非常怀疑)。

你有什么想法吗？

更新1

我能够识别渲染系列的元素。它就在那里，大小似乎正确，它有渲染点。

 <g class="highcharts-series-group" data-z-index="3">...</g>

不过，我无法将它放在前面，也无法通过任何 CSS 方式使其可见。

基本上就是这个问题。如何将其置于前进或取消隐藏？

更新2

我正在尝试通过两者设置尺寸

div.style.width = "500px";

和

chart: {
    height: 300,
    width: 300
}

没用。

更新3

I created a jsfiddle. Please, have a look.

你有什么想法吗？任何想法都是无价的。

Answer 1

解决这个问题很简单。在格式化程序回调函数中，您将返回带有已创建图表的 div 的 innerHTML。但是，这不是交互式图表，而只是 HTML。

由于动画，图表绘图区被隐藏了。禁用它，您将看到绘制的系列:

plotOptions: {
  series: {
    animation: false
  }
}

演示:

• https://jsfiddle.net/BlackLabel/us4dvgy9/

---

另一个解决方案是在工具提示格式化程序中返回一个 HTML div 元素，然后使用 setTimeout 在 div 中创建一个图表。通过这种方法，动画效果很好。

代码:

formatter: function() {

  setTimeout(function() {
    Highcharts.chart('tooltip', {
      chart: {
        width: 200,
        height: 200,
        type: 'column'
      },
      title: {
        text: 'Title'
      },
      credits: {
        enabled: false
      },
      series: [{
        data: [50, 75],
        color: 'red',
        selected: true
      }, {
        data: [10, 100],
        color: 'green'
      }],
      yAxis: {
        title: {
          text: 'Quantity'
        }
      }
    });
  }, 0);

  return '<div id="tooltip"></div>';
}

演示:

• https://jsfiddle.net/BlackLabel/rh6pw5s2/