Javascript 在对话框打开之前加载Highcharts

我有一个动态highchart，它显示在单击事件的对话框中。我已经接近我想要达到的目标，但以下情况除外：

1:我的图表包含一个事件：加载，这意味着图表在单击事件之前加载。我想在点击事件中加载它。我的第一反应是将highchart代码放在onclick事件中，但这会对图表呈现本身产生意外的影响。如何在不影响图表行为的情况下在单击事件上加载图表

2:我的图表的左侧并没有从图表中消失，如highcharts网站上的JSFIDLE示例所示：我看不到示例和我的代码之间有任何影响这一点的差异。如何让我的图表复制示例，并让我的点在左侧消失

3:当我的图表到达数据数组的末尾时，我希望它重新开始，但它似乎在没有数据的情况下继续运行，最终变得平坦。我的数据集包括3个数组，每个数组包含40个元素；apiData、calculatedData（两个数字）和apiDate（通用时间值）。如何让图表对数据进行连续循环

我的数据示例：

var apiData = [75, 76, 89, 91, 86, 56, 46, 89, 87, 96];
var calculatedData = [78, 81, 98, 95, 89, 70, 59, 91, 90, 78];
var apiDate = [1482613200,1482624000,1482634800,1482645600,1482656400
,1482667200,1482678000,1482688800,1482699600,1482710400,1482721200];

这些div附带了onClick事件：

<div class="wrap">
  <div class="left col-xs-4" 
       id="8d450007-9cbf-11e6-a7da-14109fd4bd8b"> 
  </div>
  <div class="center col-xs-4" 
       id="8d45001c-9cbf-11e6-a7da-14109fd4bd8b">
  </div>
  <div class="right col-xs-4" 
       id="8d450008-9cbf-11e6-a7da-14109fd4bd8b">
  </div>
</div>

海图代码：

$(function () { 
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        Highcharts.chart('canvas', {
            chart: {
                type: 'spline',
                animation: Highcharts.svg, 
                marginRight: 10,
                events: {
                    load: function () {

                        // set up the updating of the chart each 3 seconds
                        var series1 = this.series[0];
                        var series2 = this.series[1];
                        var seriesCount = 0;
                        setInterval(function () {
                            var x = (new Date(apiDate[seriesCount] * 1000)).getTime(),
                                y1 = apiData[seriesCount],
                                y2 = calculatedData[seriesCount];
                            series1.addPoint([x, y1], true, true);
                            series2.addPoint([x, y2], true, true);
                            seriesCount++;
                        }, 3000);
                        if (seriesCount > 10) {
                          char
                        }
                    }
                }
            },
            title: {
                text: 'Live data'
            },
            xAxis: {
                title: {
                    text: 'Date/Time'
                },
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: [{
                title: {
                    text: 'Temperature'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            }
            ],
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 0);
                }
            },
            legend: {
                enabled: true
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'API Temperature data',
                data: (function () {
                    // use api predicted data
                    var data = [],
                        time = (new Date(apiDate[0])).getTime(),
                        dataCount = 0,
                        i;

                    for (i = 0; i <= 40; i ++) {
                        data.push({
                            x: time,
                            y: apiData[dataCount]
                        });
                    }
                    return data;
                }())
            },
            {
                name: 'Calculated Temperature data',
                data: (function () {
                    var data = [],
                        time = (new Date(apiDate[0])).getTime(),
                        dataCount = 0,
                        i;

                    for (i = 0; i <= 40; i ++) {
                        data.push({
                            x: time,
                            y: calculatedData[dataCount]
                        });
                    }
                    return data;
                }())
            }
            ]
        });
});

$（函数（）{
Highcharts.setOptions({
全球：{
useUTC:false
}
});
Highcharts.chart（'画布'{
图表：{
类型：“样条线”，
动画：Highcharts.svg，
marginRight:10，
活动：{
加载：函数（）{
//设置每3秒更新一次图表
var series1=该系列[0]；
var series2=本系列[1]；
var系列计数=0；
setInterval（函数（）{
var x=（新日期（apiDate[seriescont]*1000））.getTime（），
y1=apiData[系列计数]，
y2=计算数据[系列计数]；
系列1.添加点（[x，y1]，真，真）；
序列2.添加点（[x，y2]，真，真）；
seriecount++；
}, 3000);
如果（系列计数>10）{
烧焦
}
}
}
},
标题：{
文本：“实时数据”
},
xAxis：{
标题：{
文本：“日期/时间”
},
键入：“日期时间”，
像素间隔：150
},
亚克斯：[{
标题：{
文字：“温度”
},
绘图线：[{
值：0，
宽度：1，
颜色：'#808080'
}]
}
],
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
Highcharts.dateFormat（“%Y-%m-%d%H:%m:%S'，this.x）+'
'+
数字格式（this.y，0）；
}
},
图例：{
已启用：true
},
出口：{
已启用：false
},
系列：[{
名称：“API温度数据”，
数据：（函数（）{
//使用api预测数据
var数据=[]，
时间=（新日期（apiDate[0]）。getTime（），
数据计数=0，
我
对于（i=0；i 1）$（“#dialog”）.on（'dialogopen'，function（）{setInterval（function（）{var x=（新日期（predictedTempDt[seriesCount]*1000））.getTime（），y1=predictedExtTemp[seriesCount]，y2=predictedIntTemp[seriescoount]；series1.addPoint（[x，y1]，真，真）；series2.addPoint（[x，y2]，真，真）；seriescoount++；}，3000）；}）阅读后，下次尝试修剪代码并使其适合特定问题。1.您应该创建单击事件图表，以便加载事件将在模式显示后发生。2.您提供的数据不正确。时间戳无效，且未按升序排序。3.由于必须对数据进行排序，因此必须清除数据并按星号排序从Begging中删除。使用series.update（）、series.remove或series.setData（[]）删除数据。
//Initialize the dialog and set options
var opt = {
  autoOpen: false,
  modal: true,
  width: 660,
  height:460,
  title: 'Hourly Temperature'
};
var theDialog = $("#dialog").dialog(opt);



var divIdList = ["#8d45001c-9cbf-11e6-a7da-14109fd4bd8b", "#8d450007-9cbf-11e6-a7da-14109fd4bd8b", "#8d450008-9cbf-11e6-a7da-14109fd4bd8b"]
$(function () {
  divIdList.forEach(function(id) {
    $(id).click(function () {
        theDialog.dialog('open');
    });
  })
});

$(function () { 
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        Highcharts.chart('canvas', {
            chart: {
                type: 'spline',
                animation: Highcharts.svg, 
                marginRight: 10,
                events: {
                    load: function () {

                        // set up the updating of the chart each 3 seconds
                        var series1 = this.series[0];
                        var series2 = this.series[1];
                        var seriesCount = 0;
                        setInterval(function () {
                            var x = (new Date(apiDate[seriesCount] * 1000)).getTime(),
                                y1 = apiData[seriesCount],
                                y2 = calculatedData[seriesCount];
                            series1.addPoint([x, y1], true, true);
                            series2.addPoint([x, y2], true, true);
                            seriesCount++;
                        }, 3000);
                        if (seriesCount > 10) {
                          char
                        }
                    }
                }
            },
            title: {
                text: 'Live data'
            },
            xAxis: {
                title: {
                    text: 'Date/Time'
                },
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: [{
                title: {
                    text: 'Temperature'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            }
            ],
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 0);
                }
            },
            legend: {
                enabled: true
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'API Temperature data',
                data: (function () {
                    // use api predicted data
                    var data = [],
                        time = (new Date(apiDate[0])).getTime(),
                        dataCount = 0,
                        i;

                    for (i = 0; i <= 40; i ++) {
                        data.push({
                            x: time,
                            y: apiData[dataCount]
                        });
                    }
                    return data;
                }())
            },
            {
                name: 'Calculated Temperature data',
                data: (function () {
                    var data = [],
                        time = (new Date(apiDate[0])).getTime(),
                        dataCount = 0,
                        i;

                    for (i = 0; i <= 40; i ++) {
                        data.push({
                            x: time,
                            y: calculatedData[dataCount]
                        });
                    }
                    return data;
                }())
            }
            ]
        });
});