Javascript 使用ajax和jquery在新窗口中显示highcharts

我见过其他类似的问题，但没有ajax和jquery，希望不要重复

我需要在新窗口“estadisticasMultiples.html”中加载图表，其中有带标记图表的div，但highcharts错误显示“未找到渲染div”（）

如何在新窗口中，在带有charts标签的div中呈现图表

谢谢你能给我的帮助

   function ver_grafica(var1, var2, var3){

        $.post('ver_grafica.php', 
            {
                var1:var1,
                var2:var2,
                var3:var3
            }
        )

        .done(function (data)
            {
                var datos = JSON.parse(data);

                var options = {
                    chart: {
                        renderTo: 'charts',
                        width: '800',
                        height: '550'
                    },

                    title: {
                            text: 'Histórico de '+datos['nombre']
                    },

                    subtitle: {
                        text: 'durante el mes de '+mesesNombre[parseInt(datos['mes']-1)]+' de '+datos['anio']
                    },

                    yAxis: {
                        title: {
                            text: datos['unidad']
                        }
                    },

                    xAxis: {
                        tickInterval: 1
                    },

                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle'
                    },

                    plotOptions: {
                        series: {
                            pointStart: 1,
                            marker: {
                                enabled: false
                            },
                        },
                    },

                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            '<i>Día '+this.x +': </i><b>'+this.y+'</b>';
                        }
                    },

                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        layout: 'horizontal', // default
                        itemDistance: 50
                    },

                    colors: ['#2f7ed8', '#FF7777', '#FFC077', '#FFC077', '#FF7777'],

                    series: [{
                            name: datos['nombre'],
                            data: datos['param'],
                            marker: { 
                                symbol: 'circle'
                            },
                            zIndex: 6
                        }, {
                            name: 'Niveles máximo y mínimo',
                            data: datos['max'],
                            marker: { 
                                symbol: 'false'
                            },
                            zIndex: 1,
                            enableMouseTracking: false,
                        }
                    ]
                };

                var nuevaVentana = window.open('estadisticasMultiples.html', '_blank');

                var graficas = new Highcharts.Chart(options);



            }
        )

        .fail(function() 
            {
                alert("Falló al intentar enviar los datos");
            }
        );
    }

函数veru_grafica（var1、var2、var3）{ $.post（'ver_grafica.php'， { var1:var1， var2:var2， var3:var3 } ) .完成（功能（数据） { var datos=JSON.parse（数据）； 变量选项={ 图表：{ renderTo:'图表'， 宽度：“800”， 高度：'550' }, 标题：{ 文本：“Histórico de”+datos['nombre'] }, 副标题:{ 文本：'durante el-mes de'+mesesNombre[parseInt（datos['mes']-1）]+'de'+datos['anio'] }, 亚克斯：{ 标题：{ 文本：datos['unidad'] } }, xAxis：{ 时间间隔：1 }, 图例：{ 布局：“垂直”， 对齐：“右”， 垂直排列：“中间” }, 打印选项：{ 系列：{ 起点：1， 标记：{ 已启用：false }, }, }, 工具提示：{ 格式化程序：函数（）{ 返回“+this.series.name+”
+ 'Día'+this.x+'：'+this.y+'； } }, 图例：{ 对齐：'居中'， 垂直排列：“底部”， 布局：'水平'，//默认值 项目距离：50 }, 颜色：['#2f7ed8'、'#FF7777'、'#FFC077'、'#FFC077'、'#FFC077'、'#FF7777']， 系列：[{ 名称：datos['nombre']， 数据：datos['param']， 标记：{ 符号：“圆圈” }, zIndex:6 }, { 名称：“Niveles máximo y mínimo”， 数据：datos['max']， 标记：{ 符号：'假' }, zIndex:1， enableMouseTracking:false， } ] }; var nuevaVentana=window.open（'estadisticasMultiples.html'，'u blank'）； var graficas=新的Highcharts.图表（选项）； } ) .fail（函数（） { 警报（“Fallóal-intentar enviar los datos”）； } ); } estadisticasMultiples.html

<html>
    <head></head>
    <body>
        <div name='charts' id='charts'></div>
    </body>
</html>

<html>
<head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div name='charts' id='chart'></div>

    <script>
        var options = window.options;

        if (options) {
            Highcharts.chart(options);
        }
    </script>
</body>
</html>

---

您不是在打开的窗口中创建图表，而是在没有指定容器的窗口中创建ajax请求。可以从打开的窗口中选择元素，并在选项中进行设置：

var nuevaVentana = window.open('estadisticasMultiples.html', '_blank');
var graficas;

nuevaVentana.onload = function () {
  options.chart.renderTo = nuevaVentana.document.getElementById('charts');
  graficas = new Highcharts.Chart(options);
}

如果打开的窗口中没有脚本，动画可能会有问题，我会将用于渲染图表的脚本移动到

estadisticasMultiples.html

文件中，并通过localStore或全局变量将options对象传递到打开的窗口

estadisticasMultiples.html

<html>
    <head></head>
    <body>
        <div name='charts' id='charts'></div>
    </body>
</html>

<html>
<head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div name='charts' id='chart'></div>

    <script>
        var options = window.options;

        if (options) {
            Highcharts.chart(options);
        }
    </script>
</body>
</html>

---

非常感谢@morganfree，您的代码工作得非常完美。