我试图找出是否有可能根据我的参数重绘图表只会调用特定的API？
这是我的图表在加载时的外观。
使用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（下拉列表）
[
{
"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>
要动态更改图表选项，您可以使用chart.update()方法，其中可以传递series.data，chart.title，轴选项等新选项。当只需要更改数据时，您可以使用series.setData()或series.update()。查看下面发布的演示和文档，了解有关它的更多信息。
演示：
API参考：