Question

我有一个动态高图，显示在点击事件的对话框中。我接近我想要的地方，除了以下内容：

1：我的图表有一个事件：包含加载，这意味着图表在点击事件之前加载。我希望它加载click事件。我的第一直觉是将高图代码放在onclick事件中，但这对图表呈现本身产生了意想不到的影响。如何在不影响图表行为的情况下对点击事件加载图表？

2：我图表的左侧不会从图表中消失，如高图网站上的jsfiddle示例所示：http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/我看不出任何区别这个例子和我的代码会对此产生影响。如何让我的图表复制示例并让我的点在左侧消失？

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>

包含图表的对话框：

<!-- Div to hold the line chart -->
<div id="dialog" title="Basic dialog">
  <div id="canvas" width="600" height="400"></div>
</div>

对话框设置：

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

Highchart代码：

$(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

0 个答案: