Question

我搜索并搜索了这个问题的答案，无法在任何地方找到答案。

我有一个highcharts折线图，可以从CSV文件中将数据读入5个系列，这个工作非常好并且绘制得很好。 CSV文件中的数据每小时更新一次（每个系列中的最新值都会更改），目前我必须手动刷新（按F5）刷新实际的图表数据。

到目前为止，我已经尝试过chart.destroy，series.remove，series，setData都无济于事，每次，图表都会快乐地破坏，然后按下“创建新”按钮，图表会回来，所有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的extend方法来执行此操作。只需确保每次为类别和系列创建新数组，如下所示：

(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);
}());

highcharts刷新CSV数据重复不刷新

1 个答案: