javascript - 如何获取特定年份的 json 数据？

Question

我有一个包含年份及其值的数据结构 json，我会将其显示在我的 Highcharts 上。

如何在年份之间过滤它？例如，如果我在下拉列表中选择 2016 年至 2018 年，它将仅显示 2016 年、2017 年和 2018 年的数据。

这是我的数据结构

[
{
    "New_Students": "321",
    "NSYEAR": "2014",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
},
{
    "New_Students": "1923",
    "NSYEAR": "2015",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
},
{
    "New_Students": "293",
    "NSYEAR": "2016",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
},
{
    "New_Students": "29",
    "NSYEAR": "2017",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
},
{
    "New_Students": "524",
    "NSYEAR": "2018",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
}
    ]

这是我到目前为止的输出。

这是我获取 json 数据的代码

 var strCampus = "<%=MyProperty%>";
    var MyUpdateDate = "<%=UpdateDate%>";
    var ParamYear;
    var OnClickYearVal;
    var Year = [];
    var user_data = [];
    //Rdata.ParamYear = ParamYear;

 var drill_down_data = [];
    $(function () {
        $.getJSON('http://localhost:37590/get_NSData/' + strCampus, function (jsonData) { 


            const data = jsonData
            console.log(data);


let categories = [],
  series = [],
  i,
  j;
  var chartSeriesData = [];
  var chartDrilldownData = [];

     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: [{ y: +data[i].New_Students }],

      });

      for (j = 0; j < i; j++) {
        series[i].data.unshift(null);
      }

  }

提前感谢您的帮助。

Answer 1

您可以使用 setExtremes 轴方法将下拉事件与图表范围绑定(bind):

var chart = Highcharts.chart('container', {
    ...,
    xAxis: {
        minRange: 0,
        ...
    }
});

document.getElementById('selectFrom')
    .addEventListener('change', function() {
        chart.xAxis[0].setExtremes(Number(this.value), chart.xAxis[0].max);
    });

document.getElementById('selectTo')
    .addEventListener('change', function() {
        chart.xAxis[0].setExtremes(chart.xAxis[0].min, Number(this.value));
    });

现场演示:http://jsfiddle.net/BlackLabel/xevgsjdo/

API引用: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes