时间戳

首页 > 解决方案 > 如何仅使用取决于我的选择选项参数的新 API 重绘 Highchart？

javascript - 如何仅使用取决于我的选择选项参数的新 API 重绘 Highchart？

问题描述

我试图弄清楚是否可以根据我的仅调用特定 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
    }
]

因此，当用户单击 Year: Dropdown 并选择“ALL”时，图表应重绘并调用此结构的 API：因此 Year 将是 Year:ALL 和 Term:All （下拉列表）

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

现在在我的代码中，它只刷新页面并且没有任何反应，我尝试使用 select 选项上的文本创建一个 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>

标签： javascriptc#asp.nethighcharts

解决方案

要动态更改图表选项，您可以使用可以传递chart.update()新选项（如series.data、 、轴选项等）的方法。chart.title当只需要更改数据时，您可以使用series.setData()或series.update()。查看下面发布的演示和文档以了解更多信息。

演示：

API参考：

推荐阅读