我如何仅使用依赖于我的选择选项参数的新API重绘Highchart? [英] how do i redraw only the Highchart with new API that depends on my Select Option Parameter?
问题描述
im正在尝试确定是否有可能根据仅调用特定API的参数重绘图表?
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.
具有使用json的数据结构:
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
}
]
因此，当用户单击Year:下拉菜单并选择"ALL"时，图表应重绘并调用此结构的API: 因此年份"将为年份:全部"和期限:全部"(下拉列表)
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)
[
{
"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 select选项上的文本的if语句，但是什么也没发生:(
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 :(
这是我的代码:
<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().查看下面发布的演示和文档以了解更多信息.
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.
演示:
- 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/
- 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参考:
https://api.highcharts.com/class- reference/Highcharts.Series#setData
这篇关于我如何仅使用依赖于我的选择选项参数的新API重绘Highchart?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
