Javascript 在不同页面的div上加载Highcharts时出现问题

我正在用phonegap开发一个应用程序，我正在使用媒体查询来识别手机和平板电脑的不同分辨率。我的观点是不同的，这取决于它是手机还是平板电脑，当设备是手机时，我想在另一个页面上显示highcharts图表，该页面通过导航栏加载，当我在平板电脑中时，我希望图表显示在第一页

我不知道什么是最好的方法来做到这一点，并获得最好的性能。 我使用的图表是Highcharts给出的示例：

function graph(){
$(function() {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container' 
            },
            rangeSelector : {
                selected : 1
            },
            title : {
                text : 'AAPL Stock Price'
            },
            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
      });
    });
}

我希望该图表在第一页（如果是平板电脑）中加载到名为

container

的div中，或者在另一页（如果是智能手机）中加载到同名div中

实际上，图表只在第一页中为平板电脑加载，而在第二页中不加载。如果这是一种更好的方法，我不想调用该函数两次。 希望你能帮助我。

---

问候。

不知道您如何更改平板电脑和手机页面的html。检查是否有两个页面的html，即使没有显示。这可能就是问题所在

但是，您可以做的是更改手机页面和平板电脑页面的两个容器的名称（例如，

containerCellPhone

，

containertable

）。检测设备类型后，运行highchart代码，并相应更改

renderTo

属性

---

希望我正确理解了您的问题。

不知道您是如何更改平板电脑和手机页面的html的。检查是否有两个页面的html，即使没有显示。这可能就是问题所在

但是，您可以做的是更改手机页面和平板电脑页面的两个容器的名称（例如，

containerCellPhone

，

containertable

）。检测设备类型后，运行highchart代码，并相应更改

renderTo

属性

---

希望我正确地理解了您的问题。

我对两台设备只使用了一个html，唯一要更改的是css，以便正确显示。我真的不知道如何识别设备并将de“renderTo”更改为正确的设备。在更改css之前，您可能正在检查设备类型。因此，您可以创建一个函数

graph（divToRender）

，当您找到要更改css的设备类型时，通过传递正确的div名称来运行该函数。您可以将该参数用于图表定义中的

renderTo

属性。我对两个设备仅使用一个html，唯一要更改的是正确显示的css。我真的不知道如何识别设备并将de“renderTo”更改为正确的设备。在更改css之前，您可能正在检查设备类型。因此，您可以创建一个函数

graph（divToRender）

，当您找到要更改css的设备类型时，通过传递正确的div名称来运行该函数。您可以将该参数用于图表定义的

renderTo

属性。