Question

我正在使用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();
    });
}

这是我的捕获： My caputure

Answer 1

我怀疑你的问题是在while循环中删除了系列。

为什么不使用series.setData（）？而不是删除所有系列，然后调用addSeries？

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

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

Highcharts重绘前一行仍然存在

1 个答案: