Блог

Я пытаюсь создать highcharts столбца с 4 уровнями детализации, а также с 4 URL-адресами в формате Json.

итак, фактически при загрузке моей диаграммы будут показаны первые данные URL-адреса в формате json с данными:

 [
    {
        "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
    }
]
  

итак, при нажатии на столбец с конкретным годом, например, 2014 Год со значением 84 New_Students, он должен отображать детализацию для моего 2-го URL-адреса в формате Json с параметром «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.

вот мой код для Javascript. но при нажатии на столбец ничего не происходит, детализация не работает : (

 <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 amp;amp; 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.