highcharts 刷新 CSV 数据重复不刷新

Question

我已经搜索并搜索了这个问题的答案，但在任何地方都找不到。

我有一个 highcharts 折线图，它可以从 CSV 文件中将数据读取到 5 个系列中，这绝对可以正常工作并且绘制得很好。 CSV文件中的数据每小时更新一次（每个系列中的最新值会发生变化），目前我必须手动刷新（按F5）才能刷新实际图表数据。

到目前为止，我尝试了chart.destroy，series.remove，series，setData都无济于事，每次图表都会愉快地销毁，然后按create new按钮，图表会返回所有5个系列重复，每次我单击创建时，它都会向图表添加五个新系列，而不是销毁它并重新创建。

见下面的代码：

var chart;

        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'linegr',
                    defaultSeriesType: 'line'
                },
                title: {
                    text: 'Malicious IPs BY Type'
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
            title: {
                   text: 'Unique IPs'
                   }
                },
                subtitle: {
                    text: 'Last 10 Days'
                },
                tooltip: {
                    formatter: function() {
                    return '<b>'+ this.x +'</b>: '+ roundVal(this.y);
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                    },
                    showInLegend: true
                    }
                },
                series: [],
                exporting: {
        buttons: [
            {
                symbol: 'diamond',
                x: -62,
                symbolFill: '#B5C9DF',
                hoverSymbolFill: '#779ABF',
                _titleKey: 'reloadGraph',
                onclick: function() {
                chart.destroy();
                }
            }
        ]
    }
};
create();

function create() {
    $.get('dat.csv', function(data) {
    // Split the lines
    var lines = data.split('\n');

    // Iterate over the lines and add categories or series
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');

        // header line containes categories
        if (lineNo == 0) {
            $.each(items, function(itemNo, item) {
                if (itemNo > 0) options.xAxis.categories.push(item);
            });
        }

        // the rest of the lines contain data with their name in the first position
        else {
            var series = {
                data: []
            };
            $.each(items, function(itemNo, item) {
                if (itemNo == 0) {
                    series.name = item;
                } else {
                    series.data.push(parseFloat(item));
                }
            });

            options.series.push(series);

        }

    });

    // Create the chart
    var chart = new Highcharts.Chart(options);
function destroy() {
    chart.destroy();
    var data='';
            window.alert(chart.series.length);
    for(i=0; i<chart.series.length; i++){
        chart.redraw(true);
        chart.series[i].remove(false);
    }
        }
        $('#create').click(create);
        $('#destroy').click(destroy);
});

我希望并猜测它是一些非常简单和愚蠢的东西，我只是对代码视而不见并且找不到:)

Answer 1

我认为您的问题是每次创建图表时都重复使用相同的选项对象。尝试克隆默认选项，然后修改克隆对象以创建图表选项。您可以使用 jQuery 的扩展方法来执行此操作。只需确保每次都为类别和系列创建新数组，如下所示：

(function(){
    var chart,
    options = {
        chart: {
            renderTo: 'linegr',
            defaultSeriesType: 'line'
        },
        title: {
            text: 'Malicious IPs BY Type'
        },
        xAxis: {
            categories: []
        },
        yAxis: {
    title: {
           text: 'Unique IPs'
           }
        },
        subtitle: {
            text: 'Last 10 Days'
        },
        tooltip: {
            formatter: function() {
            return '<b>'+ this.x +'</b>: '+ roundVal(this.y);
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
            },
            showInLegend: true
            }
        },
        series: [],
        exporting: {
            buttons: [
                {
                    symbol: 'diamond',
                    x: -62,
                    symbolFill: '#B5C9DF',
                    hoverSymbolFill: '#779ABF',
                    _titleKey: 'reloadGraph',
                    onclick: function() {
                                        create();
                    }
                }
            ]
        }
    };

    function create() {
            if(chart) chart.destroy();
        $.get('dat.csv', function(data) {
            var newOptions = $.extend(true, {}, options, {
                xAxis : {
                    categories : []
                },
                series : []
            });

            // Split the lines
            var lines = data.split('\n');

            // Iterate over the lines and add categories or series
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');

                // header line containes categories
                if (lineNo == 0) {
                    $.each(items, function(itemNo, item) {
                        if (itemNo > 0) newOptions.xAxis.categories.push(item);
                    });
                }

                // the rest of the lines contain data with their name in the first position
                else {
                    var series = {
                        data: []
                    };
                    $.each(items, function(itemNo, item) {
                        if (itemNo == 0) {
                            series.name = item;
                        } else {
                            series.data.push(parseFloat(item));
                        }
                    });

                    newOptions.series.push(series);

                }

            });

            // Create the chart
            chart = new Highcharts.Chart(newOptions);

            $('#create').click(create);
            $('#destroy').click(chart.destroy);
        });
    }

    $(document).ready(create);
}());