Question

我有一个包含Year及其值的json数据结构，并将其显示在我的图表中。

如何在几年之间进行过滤？例如，如果我在下拉列表中选择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轴方法将下拉事件绑定到图表范围：

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

Answer 2

解析您的JSON数据并使用Array.prototype.filter()

例如：

// allData is your parsed JSON data
const filteredByYear = allData.filter(function(single) {
    if (single["NSYEAR"] >= 2016 && single["NSYEAR"] <= 2018) {
        return single;
    }
});

Answer 3

使用filter并且typeOf NSYEAR也是string，因此您必须转换为number：

    function getFilterDataBetweenYears(fromYear, toYear) {
        return data.filter(obj => {
            if (+obj["NSYEAR"] >= fromYear && +obj["NSYEAR"] <= toYear) {
                return obj;
            }
        });
    }

如何获取Year之间的特定json数据？

3 个答案: