我正在尝试创建具有4个向下钻取级别以及4个Json URL的列highcharts。
因此实际上在加载我的图表时,它将显示第一个json URL数据,其数据为:
[
{
"New_Students": "84",
"NSYEAR": "2014",
"NSterm": null,
"NSCareer": null,
"NSProgDescr": null,
"NSStudent": null
},
{
"New_Students": "1892",
"NSYEAR": "2015",
"NSterm": null,
"NSCareer": null,
"NSProgDescr": null,
"NSStudent": null
},
{
"New_Students": "2107",
"NSYEAR": "2016",
"NSterm": null,
"NSCareer": null,
"NSProgDescr": null,
"NSStudent": null
},
{
"New_Students": "1119",
"NSYEAR": "2017",
"NSterm": null,
"NSCareer": null,
"NSProgDescr": null,
"NSStudent": null
},
{
"New_Students": "2090",
"NSYEAR": "2018",
"NSterm": null,
"NSCareer": null,
"NSProgDescr": null,
"NSStudent": null
}
]
因此,在单击具有特定年份示例Year 2014(值为84 New_Students)的列时,它必须显示我的第二个Json URL的明细,参数为“ 2014”,这是用户单击的年份
[
{
"New_Students": "618",
"NSYEAR": null,
"NSterm": "1401",
"NSCareer": null,
"NSProgDescr": null,
"NSStudent": null
},
{
"New_Students": "149",
"NSYEAR": null,
"NSterm": "1402",
"NSCareer": null,
"NSProgDescr": null,
"NSStudent": null
},
{
"New_Students": "1",
"NSYEAR": null,
"NSterm": "1403",
"NSCareer": null,
"NSProgDescr": null,
"NSStudent": null
}
]
它将在此处显示“ 2014”年下的学期,即“ 1401”,“ 1402”,“ 1403” NSTerm。
这是我的Java代码。但是在单击该列后没有任何反应,向下钻取不起作用:(
<script>
var strCampus = "<%=MyProperty%>";
var OnClickYearVal;
var Year = [];
$(function () {
$.getJSON('http://localhost:37590/get_NSData/' + 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].NSYEAR
//+ '-' + [parseFloat(data[i].NSYEAR) + 1];
Year = [data[i].NSYEAR]
series.push({
name: [+data[i].NSYEAR] + ' School Year',
//data: [+data[i].New_Students],
data: [{
y: +data[i].New_Students,
drilldown: true
}]
});
for (j = 0; j < i; j++) {
series[i].data.unshift(null);
}
}
Highcharts.chart('YearNS', {
chart: {
width: 1150,
height: 450,
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this;
$.get('http://localhost:37590/get_NSDataTerm/' + e.point.categories + '/' + 2018, function (jsonData) {
this.addSeriesAsDrilldown(e.point,jsonData);
});
}
}
}
},
title: {
text: 'Number of New Students for ' + Year + 'SY'
},
subtitle: {
text: 'Click the columns to view the breakdown by Term. Click again to view by Program. Updated as of Yesterday 11:59PM'
},
credits: {
enabled: false
},
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: {
series: {
borderWidth: 2,
pointWidth: 100,
dataLabels: {
inside: true,
enabled: true,
format: '{point.y:,.0f}',
style: {
textShadow: false,
textOutline: false,
color: 'black'
},
}
},
column: {
events: {
}
},
},
series: series,
drilldown: {
series: []
}
});
});
});
</script>
这是我将近2周的问题,我只是highcharts和json URL的初学者。