Javascript Bootstrap Popover下的Highchart数据呈现

我正在尝试将Highcharts中的图表加载到Bootstrap popover中。尽管如此，序列路径（所有带有点的数据）是在图表或popover下方（或其他地方）呈现的。我在调试这个问题时经历了一段非常艰难的时间，似乎找不到解决它的方法

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

$（'td.chartSection'）。每个（函数（）{
变量$thisElem=$（本）；
$thisElem.popover({
位置：'顶部'，
触发器：“悬停”，
是的，
集装箱：$thisElem，
延迟：{
藏品：500
},
内容：功能（）{
//加载所有图表数据和日期
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=[“4月1日”、“4月2日”、“4月3日”、“4月4日”、“4月4日”、“5日”、“4月6日”、“4月7日”、“4月8日”、“4月9日”、“4月10日”、“4月11日”、“4月12日”、“4月13日”、“4月14日”、“4月15日”、“4月16日”、“4月17日”、“4月18日”、“4月19日”、“4月20日”、“4月21日”、“4月22日]；
//查找数据中的最小值和最大值
var maxi=Math.max.apply（数学，图表数据）；
var mini=Math.min.apply（数学、图表数据）；
$thisElem.附加（“”）；
变量$largeChart=$（'.largeChart'）；
$largeChart.highcharts({
系列：[{
数据：图表数据，
zIndex:99999
}],
图表：{
类型：'区域'，
宽度：700，
身高：300
},
标题：{
文本：“”
},
xAxis：{
类别：图表日期
},
图例：{
已启用：false
},
亚克斯：{
马克斯：马克斯，
敏：迷你，
标签：{
格式化程序：函数（）{
返回此.value；
}
},
标题：{
文本：空
},
},
工具提示：{
pointFormat:“${point.y}”
},
学分：{
已启用：false
},
出口：{
已启用：false
}
});
var$finalChart=$largeChart；
$largeChart.remove（）；
返回$finalChart[0]。outerHTML；
}
});
});

细分：

$('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;
        }
    });
});

首先，我为每个元素创建一个popover。在

content

选项中，我运行一个函数并返回一个值，即完整的图表。函数快结束时，在返回之前，我将图表克隆到一个新变量，删除原始图表，并将新图表作为其原始

outerHTML

返回，因为这正是引导弹出窗口的工作方式

尽管如此，我似乎无法在popover中查看图表系列

如果您查看下面的演示，并尝试在注释掉行

70

的情况下运行它（

$largeChart.remove（）；

），您将注意到该图表实际上成功地呈现了该系列

更多测试：

$('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;
        }
    });
});

此外，如果你

Chrome-进入开发者工具，查找表中的第一个

td

元素，并向下搜索

svg

元素，然后查找通过引导应用的类

svg:not（：root）

。。。将该值更改为绝对其他值，将显示序列

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

---

检查一下，我也遇到了同样的问题，我通过修改几行代码成功地解决了这个问题， 由于要将div附加到popover父对象，所以DOM中有两个图表，因此不应该返回outerHTML

return $largeChart;

而不是

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

这里是工作演示

此外，还需要使用class

largeChart

删除所有元素，以避免出现多个图形

---

我还想感谢你们的提问，你们帮我解决了一些棘手的问题，我已经努力了一段时间了

也许在弹出窗口中创建图表会更好，调用后，而不是克隆对象。是的，我已经尝试过了，虽然我似乎无法让它工作，不幸的是，由于恼人的爆米花。@SebastianBochan-设法让它工作。虽然，当内容被动态注入到popover中时，popover的位置是混乱的。是的，我在发布我的问题后很快就让它工作了。虽然我不得不重组一堆代码，但我还是成功了。虽然，从外观上看，您的解决方案也会起作用。谢谢：）