1

Highstock を使用して曲線を描いています。ページにドロップダウン リストがあり、そのうちの 1 つを選択すると、対応する曲線が表示されます。デフォルトでは、デフォルト値の曲線が表示されますが、別のものを選択すると、新しい曲線ですが、以前の曲線はまだ存在しています.なぜですか?私のコードは次のとおりです:

<script type="text/javascript" src='@Url.Content("~/Scripts/jquery-1.6.min.js")'></script>
<script src='@Url.Content("~/Scripts/highstock.js")' type="text/javascript"></script>
<script src='@Url.Content("~/Scripts/exporting.js")'type="text/javascript"></script>

<div id="T">
</div>

<script type="text/javascript">
  var T_chart;
  var T_options;
  var T1_data = [];
  var T2_data = [];

  $(document).ready(function () {
    draw_chart();

    $('#search').click(function () {
        redraw_chart();
    });

    Highcharts.setOptions({
        lang: {
            rangeSelectorFrom: 'From',            
            rangeSelectorTo: 'To',
            rangeSelectorZoom:'Range'
        },
        global: {
            useUTC: false
        }
    });
});

T_options = {
    chart: {
        renderTo: 'T',      
        type: 'spline'      
    },
    navigator:{
        enabled:false        
    },
    rangeSelector: {
        buttons: [{
            count: 1,
            type: 'day',
            text: 'Day'
        }, {
            count: 1,
            type: 'week',
            text: 'Week'
        }, {
            count: 1,
            type: 'month',
            text: 'Month'
        }, {
            count: 1,
            type: 'year',
            text: 'Year'
        }, {
            type: 'all',
            text: 'All'
        }],
        selected: 0          
    },
    title: {
        text: 'Temperature Chart'    
    },
    exporting: {
        enabled: false       
    },
    credits: {
        enabled: false     
    },
    yAxis: {
        labels: {
            x: -10,        
            y: 0
        }
    },
    series: []
};

function draw_chart() {
    storenum = $(".StoreNum").val();     
    $.getJSON("HisGraData", { storenum: storenum }, function (data) {
        $.each(data, function (index, item) {
            //Date Format
            var date = new Date(parseInt((item.Time).replace("/Date(", "").replace(")/", "").split("+")[0]));

            T1_data.push([Date.parse(date.toString()), item.T1]);
            T2_data.push([Date.parse(date.toString()), item.T2]);
        });

        T_options.series.push({ name: 'T1', data: T1_data });
        T_options.series.push({ name: 'T2', data: T2_data }); 

        T_chart = new Highcharts.StockChart(T_options);
    });
}

function redraw_chart() {
    storenum = $(".StoreNum").val();     //dropdown list ,select one

    while (T_chart.series.length > 0)            
        T_chart.series[0].remove();

    T1_data = [];
    T2_data = [];

    $.getJSON("HisGraData", { storenum: storenum }, function (data) {
        $.each(data, function (index, item) {
            //DateFormat
            var date = new Date(parseInt((item.Time).replace("/Date(", "").replace(")/", "").split("+")[0]));

            T1_data.push([Date.parse(date.toString()), item.T1]);
            T2_data.push([Date.parse(date.toString()), item.T2]);
        });


        T_chart.addSeries({ name: 'T1', data: T1_data });
        T_chart.addSeries({ name: 'T2', data: T2_data });


        T_chart.redraw();
    });
}

ここに私のキャプチャがあります： 私のキャプチャ

4

1 に答える 1

1

あなたの問題は、シリーズを削除する while ループにあると思われます。

すべてのシリーズを削除してから addSeries を呼び出すのではなく、単に series.setData() を使用しないのはなぜですか?

http://api.highcharts.com/highcharts#Series.setData()

次のようなものを試してください：

function redraw_chart() {
storenum = $(".StoreNum").val();     //dropdown list ,select one

T1_data = [];
T2_data = [];

$.getJSON("HisGraData", { storenum: storenum }, function (data) {
    $.each(data, function (index, item) {
        //DateFormat
        var date = new Date(parseInt((item.Time).replace("/Date(", "").replace(")/", "").split("+")[0]));

        T1_data.push([Date.parse(date.toString()), item.T1]);
        T2_data.push([Date.parse(date.toString()), item.T2]);
    });

T_chart.series[0].setData(T1_Data, false);
T_chart.series[1].setData(T2_Data, true);
}

再描画するかどうかを指示する最後のパラメーターに注意してください。

于 2013-09-24T13:07:36.677 に答える