how do i redraw only the Highchart with new API that depends on my Select Option Parameter?

问题

im trying to figure out if its possible to redraw the chart based on my parameter that will only call an specific API?

here's the look of my chart upon load.

https://imgur.com/a/u9jgla7

with the data structure of this using json:

[
    {
        "New_Students": "495",
        "NSYEAR": "2018",
        "NSterm": "1801",
        "NStermCat": "1",
        "NSCareer": null,
        "NSProgDescr": null,
        "NSStudent": null
    },
    {
        "New_Students": "29",
        "NSYEAR": "2018",
        "NSterm": "1802",
        "NStermCat": "2",
        "NSCareer": null,
        "NSProgDescr": null,
        "NSStudent": null
    }
]

so when the user click on the Year: Dropdown and selected "ALL" the chart should redraw and call the API of this structure : so the Year will be Year: ALL and Term: All (dropdownlist)

https://imgur.com/0f2cDaX

[
    {
        "New_Students": "1",
        "NSYEAR": "2013",
        "NSterm": "1301",
        "NStermCat": "1",
        "NSCareer": null,
        "NSProgDescr": null,
        "NSStudent": null
    },
    {
        "New_Students": "269",
        "NSYEAR": "2014",
        "NSterm": "1401",
        "NStermCat": "1",
        "NSCareer": null,
        "NSProgDescr": null,
        "NSStudent": null
    },
    {
        "New_Students": "52",
        "NSYEAR": "2014",
        "NSterm": "1402",
        "NStermCat": "2",
        "NSCareer": null,
        "NSProgDescr": null,
        "NSStudent": null
    },
    {
        "New_Students": "1758",
        "NSYEAR": "2015",
        "NSterm": "1501",
        "NStermCat": "1",
        "NSCareer": null,
        "NSProgDescr": null,
        "NSStudent": null
    },
    {
        "New_Students": "165",
        "NSYEAR": "2015",
        "NSterm": "1502",
        "NStermCat": "2",
        "NSCareer": null,
        "NSProgDescr": null,
        "NSStudent": null
    },
    {
        "New_Students": "272",
        "NSYEAR": "2016",
        "NSterm": "1601",
        "NStermCat": "1",
        "NSCareer": null,
        "NSProgDescr": null,
        "NSStudent": null
    },
    {
        "New_Students": "21",
        "NSYEAR": "2016",
        "NSterm": "1602",
        "NStermCat": "2",
        "NSCareer": null,
        "NSProgDescr": null,
        "NSStudent": null
    },
    {
        "New_Students": "21",
        "NSYEAR": "2017",
        "NSterm": "1701",
        "NStermCat": "1",
        "NSCareer": null,
        "NSProgDescr": null,
        "NSStudent": null
    },
    {
        "New_Students": "8",
        "NSYEAR": "2017",
        "NSterm": "1702",
        "NStermCat": "2",
        "NSCareer": null,
        "NSProgDescr": null,
        "NSStudent": null
    },
    {
        "New_Students": "475",
        "NSYEAR": "2018",
        "NSterm": "1801",
        "NStermCat": "1",
        "NSCareer": null,
        "NSProgDescr": null,
        "NSStudent": null
    },
    {
        "New_Students": "29",
        "NSYEAR": "2018",
        "NSterm": "1802",
        "NStermCat": "2",
        "NSCareer": null,
        "NSProgDescr": null,
        "NSStudent": null
    },
    {
        "New_Students": "20",
        "NSYEAR": "2018",
        "NSterm": "1811",
        "NStermCat": "1",
        "NSCareer": null,
        "NSProgDescr": null,
        "NSStudent": null
    }
]

in my code right now it only refresh the page and nothing happens, i tried to create a if statement with the text on the select option but nothing happens :(

here's my code:

<script> 
    var strCampus = "<%=MyProperty%>";
     var MyUpdateDate = "<%=UpdateDate%>";
    var ParamTerm;
    var OnClickYearVal;
    var Year = [];

    var myURL = new URLSearchParams(window.location.search);
    var ParYear = myURL.get('ParYear');
    console.log(ParYear)

    //$(document).ready(function () {
    //       if (document.getElementById('sel').selectedOptions(0).text == "All") {
    //            var url = 'http://localhost:37590/get_NSDataTerm1/' + strCampus  
    //        } else {
    //            var url = 'http://localhost:37590/get_NSDataTerm/' + strCampus +'/'+ ParYear
    //        }
    //});

    $(function () {
        $.getJSON('http://localhost:37590/get_NSDataTerm1/' + strCampus  , function (jsonData) { 
            const data = jsonData
            console.log(data);

let categories = [],
  series = [],
  i,
  j;

for (i = 0; i < data.length; i++) {
  categories[i] = data[i].NSterm;
  Year = [data[i].NSYEAR]
  series.push({
    name: [+data[i].NSterm] + ' School Year',
    data: [+data[i].New_Students]
  });

  for (j = 0; j < i; j++) {
    series[i].data.unshift(null);
  }
}




Highcharts.chart('TermNS', {
    chart: {
     width: 1150,
     height: 450,
    type: 'column'
    },
    exporting: {enabled: false},
    title: {
        text: 'NS for  ' + Year + 'SY' + ' per Term'
    },
    subtitle: {
        text: 'Click the columns to view the breakdown by Career. Click again to view by Program. Updated as of ' + MyUpdateDate
    },
    credits: {
        enabled: false
    },
    yAxis: {
        title: {
            text: "Number of Students"
        }
    },
    xAxis: {
        min: 0,
        max: categories.length - 1,
    crosshair: false,
    categories: categories
    },


     legend: {
            enabled: true,
            align: 'center',
            layout: 'horizontal',
            verticalAlign: 'top',

            floating: false,
        borderWidth: 1,
        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
        shadow: true
        },
    plotOptions: {
        column: {
            grouping: false
        },
            series: {
            borderWidth: 2,
           pointWidth: 80,
            dataLabels: {
                //inside: true,
                overflow: 'none',
                crop: false,
                enabled: true,
                //format: '<span style = "color:{series.color}"</span> : <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
                style: {
                    textShadow: false,
                    textOutline: false,
                    color: 'black'
                },
            },
            point: {
                events: {
                  click: function () {
                      ParamTerm = this.category
                      var CatTerm = ParamTerm.substr(-1);

                      window.location = "http://localhost:37590/NewStudentReportProgram?ParYear="  + ParYear + '&ParTerm=' + CatTerm
                     }
                 }
            }
        }
    },
  series: series
        });
        });
        });
</script>

回答1:

To dynamically change chart options you can use chart.update() method where new options like series.data, chart.title, axis options etc can be passed. When only data needs to be changed you can use series.setData() or series.update(). Check demo and docs posted below to learn more about it.

Demo:

• chart.update(): https://jsfiddle.net/BlackLabel/v4f862ty/2/
• series.setData(): http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/series-setdata/

API reference:

• https://api.highcharts.com/class-reference/Highcharts.Chart#update

• https://api.highcharts.com/class-reference/Highcharts.Series#setData

来源：https://stackoverflow.com/questions/55470507/how-do-i-redraw-only-the-highchart-with-new-api-that-depends-on-my-select-option