Question

我需要一些帮助。我正在尝试加载Highchart（http://www.highcharts.com/docs/getting-started/your-first-chart）。当我的index.html中已经存在div时，示例图表正确加载。

但是，无论何时创建按钮，都会立即创建高图的div。

function querySomething {
//I have an popup that is able to display html code onto itself. So here "out" contains the html code to be sent to the popup.
var out = "";

out = out + "START OF CHART";
out = out + "<div id='chart' style='width:100%; height:100px;'></div>";
out = out + "END OF CHART";

//process and display the html in "out" here
}

下面在同一个javascript文件中，我把网页给出的内容：

$(function () { 
$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});

}）;

然而，当我访问弹出窗口时，我看到的只是在开始和结束之间的一个巨大空白：

START OF CHART







END OF CHART

我认为这是因为在页面加载时调用了jquery，但是还没有创建div。我用Google搜索并发现了on（）方法。

.on( events [, selector ] [, data ], handler )

所以我试过了：

$('body').on('click', '#chart', function () { 
$('#chart').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});
});

然而，它仍然无效。此外，该事件不应该是单击，而是在创建div后立即自动显示图表。有什么帮助吗？

编辑：我改为活动到＆＃34;改变＆＃34;像这样：

    $('body').on('change', '#chart', function () { 
$('#chart').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});
});

但仍然得到一张空白的图表div。

Answer 1

您创建的div具有id =＆＃39;图表＆＃39;

out = out + "<div id='chart' style='width:100%; height:100px;'></div>";

而您传递给highcharts的容器ID是＆＃39;容器＆＃39;

$('#container').highcharts({

并检查是否在highcharts调用时创建div，您可以尝试：

alert(document.getElementById('chart'));

如果它显示一个元素，则表示已经创建了div。如果没有，那么你可以尝试：

$('#chart').on('change', function() {

可以肯定的是，您也可以尝试：

$(document).ready(function() { /* code here */ });

Answer 2

您可以使用在创建DIV的函数完成后执行的回调函数。

在回调函数中添加填充DIV的代码。

如何在创建Div后自动调用Jquery？

2 个答案: