javascript - Bootstrap Popover 下的 Highchart 数据渲染

Question

我正在尝试将图表从 Highcharts 加载到 Bootstrap 弹出窗口中。尽管如此，系列路径(所有带有点的数据)正在图表或弹出框下方(或其他位置)呈现。我在尝试调试这个问题时遇到了很大的困难，并且似乎无法找到解决方法。

jQuery(不要不知所措，其中大部分只是 Highchart 选项):

$('td.chartSection').each(function () {
    var $thisElem = $(this);
    $thisElem.popover({
        placement: 'top',
        trigger: 'hover',
        html: true,
        container: $thisElem,
        delay: {
            hide: 500
        },
        content: function () {
            //Loading all the chart data and dates
            var chartData = [10.82, 11.79, 12.89, 14.01, 13.01, 10.11, 9.11, 7.02, 8.00, 10.55, 9.00, 11.20, 13.67, 13.56, 17.39, 18.34, 19.90, 19.23, 18.29, 17.10, 18.20, 18.29];
            var chartDates = ["01 Apr", "02 Apr", "03 Apr", "04 Apr", "05 Apr", "06 Apr", "07 Apr", "08 Apr", "09 Apr", "10 Apr", "11 Apr", "12 Apr", "13 Apr", "14 Apr", "15 Apr", "16 Apr", "17 Apr", "18 Apr", "19 Apr", "20 Apr", "21 Apr", "22 Apr"];

            //Finding the minimum and maximum values within the data
            var maxi = Math.max.apply(Math, chartData);
            var mini = Math.min.apply(Math, chartData);

            $thisElem.append('<span class="largeChart"></span>');

            var $largeChart = $('.largeChart');

            $largeChart.highcharts({
                series: [{
                    data: chartData,
                    zIndex: 99999
                }],
                chart: {
                    type: 'area',
                    width: 700,
                    height: 300
                },
                title: {
                    text: ''
                },
                xAxis: {
                    categories: chartDates
                },

                legend: {
                    enabled: false
                },
                yAxis: {
                    max: maxi,
                    min: mini,
                    labels: {
                        formatter: function () {
                            return this.value;
                        }
                    },
                    title: {
                        text: null
                    },
                },
                tooltip: {
                    pointFormat: '${point.y}'
                },

                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                }
            });

            var $finalChart = $largeChart;

            $largeChart.remove();


            return $finalChart[0].outerHTML;
        }
    });
});

分割:

首先，我为每个元素创建一个弹出窗口。在 content 选项中，我正在运行一个函数并返回一个值，即完成的图表。在函数接近尾声时，在返回之前，我将图表克隆到一个新变量，删除原始图表，然后将新图表作为其原始 outerHTML 返回，因为这就是 Bootstrap Popover 的工作原理.

尽管如此，我似乎无法在弹出窗口中查看图表系列。

如果您查看下面的演示，并尝试使用注释掉的 70 行 ($largeChart.remove();) 运行它，您会注意到图表确实事实上成功渲染了该系列。

更多测试:

此外，如果您RUN THIS DEMO ......

Chrome - 进入开发者工具查找表中的第一个 td 元素，并向下查找 svg 元素，然后查找通过 Bootstrap 应用的类 svg:not(:root)...将该值更改为其他任何值，然后将显示该系列。

Firefox - 该系列会一直显示，直到动画完成，然后消失。

WORKING DEMO

Answer 1

看看这个，我遇到了同样的问题，我通过更改几行代码设法解决了它， 由于您将 div 附加到您的弹出窗口父级，因此您的 DOM 中有 2 个图表，因此您不应该返回 externalHTML

return $largeChart;

而不是

var $finalChart = $largeChart;
$largeChart.remove();
return $finalChart[0].outerHTML;

这是工作演示

http://jsfiddle.net/J88gH/3/

此外，您还需要删除类 largeChart 的所有元素以避免出现多个图表

我还要感谢您的提问，您帮助我解决了一些我困扰了一段时间的难题