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

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

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;
    }
}

真实数据示例 主图表为

行

类型。工具提示图表属于

列

类型

虚拟数据示例 主图表为

行

类型。工具提示图表也是

行

类型。您可能会看到半可见的红色和绿色符号。它们要么被某种东西隐藏着（我正试图弄清楚它是什么），要么突然停止了渲染（我对此深表怀疑）

你知道会是什么吗

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

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

及

无济于事

更新3

---

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

解决这个问题的方法非常简单。在formatter回调函数中，您将返回一个div的innerHTML和一个创建的图表。但是，这不是交互式图表，而是HTML

图表打印区域因动画而隐藏。禁用它，您将看到打印的系列：

plotOptions: {
  series: {
    animation: false
  }
}

演示：

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>';
}

---

另一种解决方案是在工具提示格式化程序中返回一个HTMLdiv元素，然后使用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>';
}

格式化程序：函数（）{
setTimeout（函数（）{
Highcharts.chart（'工具提示'{
图表：{
宽度：200，
身高：200，
类型：“列”
},
标题：{
文本：“标题”
},
学分：{
已启用：false
},
系列：[{
数据：[50,75]，
颜色：“红色”，
所选：真
}, {
数据：[10100]，
颜色：“绿色”
}],
亚克斯：{
标题：{
文本：“数量”
}
}
});
}, 0);
返回“”；
}

演示：

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>';
}

---

你能在JSFIDLE这样的在线代码编辑器中重现这个问题吗？@WojciechChmiel请看一看