Как мне перерисовать только Highchart с новым API, который зависит от моего параметра выбора параметров? - PullRequest
Новая
       5

Как мне перерисовать только Highchart с новым API, который зависит от моего параметра выбора параметров?

1 голос
/ 02 апреля 2019

я пытаюсь выяснить, возможно ли перерисовать диаграмму на основе моего параметра, который будет вызывать только определенный API?

вот мой график при загрузке.

https://imgur.com/a/u9jgla7

со структурой данных с использованием 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
    }
]

, поэтому, когда пользователь нажимает на Год: выпадающий список и выбирает «ВСЕ» на диаграммеследует перерисовать и вызвать API этой структуры: таким образом, Год будет Год: ВСЕ и Термин: Все (выпадающий список)

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
    }
]

в моем коде сейчас толькообновите страницу и ничего не происходит, я попытался создать оператор if с текстом в опции выбора, но ничего не происходит :(

вот мой код: 

<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 Ответ

0 голосов
/ 02 апреля 2019

Для динамического изменения параметров диаграммы вы можете использовать метод chart.update(), в котором можно передавать новые параметры, такие как series.data, chart.title, параметры оси и т. Д. Когда нужно изменить только данные, вы можете использовать series.setData() или series.update(). Проверьте демо и документы, размещенные ниже, чтобы узнать больше об этом.

Демо-версия:

Справочник по API:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...