JavaScript图表动画

Question

对于这段代码，我希望能够从复选框中选择一年，并在图表上绘制一条线，当我取消选择年份时，我希望线条消失。有没有办法用我在下面提供的代码来做到这一点？

if (trends.length == 0)

                return;

            window.seriesOptions = [];
            window.navData = [];
            var yAxisOptions = [],
                seriesCounter = 0,
                colors = Highcharts.getOptions().colors;

            $.each(trends, function (i, trend) {

                //series creation
                $.getJSON(trend, function (data) {

                    //first line is dashed
                    if (i == 0) {
                        seriesOptions[i] = {
                            name: years[i],
                            data: data,
                            //dashStyle: 'dash',
                            lineWidth: 4,
                            color: '#000000',
                            tooltip: {
                                valueDecimals: 2
                            }
                        };
                        $('')
                    }
                    else if (i > 5) {
                        seriesOptions[i] = {
                            name: years[i],
                            data: data,
                            dashStyle: 'dashdot',
                            tooltip: {
                                valueDecimals: 2
                            }
                        };
                    }
                    else {
                        seriesOptions[i] = {
                            name: years[i],
                            data: data,
                            tooltip: {
                                valueDecimals: 2
                            }
                        };
                    }
                    navData = navData.concat(data);

                    // As we're loading the data asynchronously, we don't know what order it will arrive. So
                    // we keep a counter and create the chart when all the data is loaded.
                    seriesCounter++;

                    if (seriesCounter == trends.length) {
                        createChart();
                    }
                });
            });

            // create the chart when all data is loaded



            function createChart() {
                window.chartwidth = $('#ChartContainer').width();
                window.chartops = {
                    chart: {
                        reflow: true,
                        //marginRight: 160
                        events: {
                            load: function () {
                                @if (!string.IsNullOrEmpty(ViewBag.imageAbsoluteRef))
                                    {
                                        WriteLiteral("this.renderer.image('" + ViewBag.imageAbsoluteRef + "', 80, 70, 100, 100).add();\n");
                                        //WriteLiteral("setChart(" + ViewBag.annot + ");\n");
                                    }
                            }
                            //redraw: function () {
                            //    var div = $('#ChartContainer');
                            //    var width = div.width();
                            //    var height = width / 1.618;

                            //    div.css('height', height);
                            //}


                        }


                    },
                    credits: {
                        text: "ClearMarketView.com",
                        href: "http://clearmarketview.com"
                    },
                    rangeSelector: {
                        selected: 4
                    },

                    colors: ['#0000FF', '#FF0000', '#00FF00', '#820082', '#008282'],

                    legend: {
                        layout: 'vertical',
                        verticalAlign: 'top',
                        align: "right",
                        borderWidth: 0,
                        y: 100,
                        floating: false,
                        @if(ViewBag.sprd == "1I")
                        {
                            base.WriteLiteral("x: -40,\n labelFormat: '<span style=\"color:{color}\">{name}</span>: <b>{point.y}</b>',\n");
                        }
                        else if(ViewBag.sprd == "1S")
                        {
                            base.WriteLiteral("x: -10,\n labelFormat: '<span style=\"color:{color}\">{name}</span>: <b>{point.y: .2f} </b>',\n");
                        }
                        else
                        {
                            base.WriteLiteral("labelFormat: '<span style=\"color:{color}\">{name}</span>: <b>{point.y: .2f} </b>',\n");
                        }
                        //itemStyle: {
                        //    align: 'right'
                        //},
                        enabled: true
                    },

                    yAxis: {
                        offset: 36,
                        opposite: true
                    },
                    //xAxis:{
                    //    max: (new Date(+new Date() + 631152e5))
                    //},
                    title: {
                        text: '@ViewBag.chartTitle',
                        style: {
                            color: '#000000',
                            fontWeight: 'bold',
                            fontSize: '18px'
                        }
                    },
                    navigator: {

                        series: {
                            name: 'base',
                            data: window.navData
                        },
                        baseSeries: 'base'
                    },

                    tooltip: {
                        //pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                        //valueDecimals: 2
                        positioner: function () {

                            return {x:window.chartwidth - 100, y:75};
                        },
                        formatter: function () {
                            return Highcharts.dateFormat('%b %e', new Date(this.x));
                        }
                    },

                    series: window.seriesOptions
                };



                $('#ChartContainer').highcharts('StockChart', window.chartops);
            }          
        });