如何使用多个Json URL管理我的Highcharts细分?

时间:2019-03-08 03:13:53

标签: javascript c# json

我正在尝试创建具有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的初学者。

0 个答案:

没有答案