Javascript 重绘前一行的Highcharts仍然存在

我正在使用Highstock绘制曲线，在我的页面中有一个下拉列表，当我选择其中一条时，它将显示相应的曲线。默认情况下，它将显示默认值的曲线，但当我选择另一条时，它将显示较新的曲线，但以前的曲线线仍然存在。为什么？我的代码如下：

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

以下是我的捕获：

---

我怀疑您的问题出在删除该系列的while循环中

与其删除所有系列，然后调用addSeries，为什么不直接使用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);
}

---

请注意最后一个参数，它告诉您是否要重新绘制。

我怀疑您的问题出在删除序列的while循环中

与其删除所有系列，然后调用addSeries，为什么不直接使用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);
}

---

请注意最后一个参数，它告诉它是否要重新绘制。

刚才，我已经尝试了setData方法，它确实有效。非常感谢。顺便说一下，还有一个问题，如果有很多数据超过10000，则需要显示其趋势，我能做什么呢？它只是不能在曲线上显示所有的数据。高图目前没有趋势线。这是一个很流行的要求，也许你应该把每10个点作为一个近似值来绘制？如何把每10个点作为一个近似值来绘制？Highcharts已经很久没有使用了，大多数人都忘记了。你能给我举个例子吗？Highcharts不能帮你这样做。您必须创建一个包含每10个点的新数据数组。此外，我相信highstock应该能够应对数千点。你有性能问题吗？现在我只选择了2000个点来显示，但我能感觉到它的加载速度有点慢，所以我相信当加载更多的时候，它会变得更慢。刚才，我已经尝试了setData方法，它确实有效。非常感谢。顺便提一下，还有一个问题，如果有很多超过10000的数据需要显示其趋势，我能做什么呢？它只是不能在曲线上显示所有的数据。高图目前没有趋势线。这是一个很流行的要求，也许你应该把每10个点作为一个近似值来绘制？如何把每10个点作为一个近似值来绘制？Highcharts已经很久没有使用了，大多数人都忘记了。你能给我举个例子吗？Highcharts不能帮你这样做。您必须创建一个包含每10个点的新数据数组。此外，我相信highstock应该能够应对数千点。你有性能问题吗？现在我只选择了2000点来显示，但我能感觉到它的加载速度有点慢，所以我相信当加载更多时，它会变得更慢。