2

これに対する答えを検索して検索しましたが、どこにも見つかりません。

CSV ファイルから 5 つのシリーズにデータを読み取るハイチャートの折れ線グラフがありますが、これはまったく問題なく機能し、うまくプロットされます。CSV ファイル内のデータは 1 時間ごとに更新され (各シリーズの最新の値は変更されます)、現在は手動で更新 (F5 キーを押す) して実際のグラフ データを更新する必要があります。

これまでのところ、chart.destroy、series.remove、series、setData をすべて無駄にしようとしましたが、毎回、チャートは喜んで破壊され、[新しい作成] ボタンを押すと、5 つのシリーズすべてが複製された状態でチャートが戻ってきます。 [作成] をクリックすると、チャートを破棄して再作成するのではなく、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);
});

私はそれが本当に単純で愚かなものであり、コードが見えなくなって見つけられないことを望んでおり、推測しています:)

4

1 に答える 1

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);
}());
于 2012-05-29T13:56:48.717 に答える