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

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


真实数据示例

主图表为line类型。工具提示图表为column类型。

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

虚拟数据示例

主图表为line类型。工具提示图也属于line类型。您可能会看到半可见的红色和绿色符号。它们要么被某种东西隐藏(我试图弄清楚它是什么),要么突然停止渲染(我对此表示高度怀疑)。

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

您有什么想法吗?

更新1

我能够确定该系列渲染到的元素。在那里,大小似乎正确,已经渲染了点。

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


不过,我无法将其放在最前面,也无法通过任何CSS手段使其可见。

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

基本上这就是问题。如何使其前进或后退?

更新2

我正在尝试同时设置尺寸

div.style.width = "500px";




chart: {
    height: 300,
    width: 300
}


无济于事。

更新3

I created a jsfiddle. Please, have a look.

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

最佳答案

解决此问题的方法非常简单。在格式化程序回调函数中,您将返回带有已创建图表的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/

关于javascript - 工具提示中的图表未完全呈现,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57508282/

10-12 12:26
查看更多