javascript - 在 Highcharts 中过滤数据

Question

我有三个选择菜单:模态、bodyPart 和 equipmentModel，我想做的是:当用户选择一个模态时，它只显示该模态的数据，其次显示该模态可用的 bodyParts，最后显示 equipmentModels可用于所选的 bodyPart 和模态。当用户选择这 3 个菜单时，数据将在图表 (highchart) 中过滤。

我的数据格式:

[
  {
   "x":1437001200000,
   "y":7,"bodyPart":null,
   "equipmentModel":"asfasf"
   }

]

我有这个 js 代码来执行此操作(CT 数据示例):

var type1 = $("#s2 option:selected").text();
var type2 = $("#s3 option:selected").text();

$.each(chart.series[2].data, function(i, p) {
    if (p.bodyPart != type1 && p.equipmentModel != type2) {
        chart.series[2].data[i].remove();

    }
});

虽然我收到这个错误:

Uncaught TypeError: Cannot read property 'bodyPart' of undefined

并且它只根据中间菜单过滤数据。我怀疑这是因为当删除一个点时，序列的长度会发生变化，并且它会从索引 0 开始计数。

我该如何解决这个问题？

提前致谢。

Answer 1

我认为您可以通过两种方式制作图表。首先，您可以将所有系列添加到图表中，并使用 series.hide() 和 series.show() 隐藏和显示过滤后的数据。 http://api.highcharts.com/highcharts#Series.hide http://api.highcharts.com/highcharts#Series.show

$(function() {
  var mod, bodyP;
  $('#container').highcharts({
    plotOptions: {
      series: {
        showInLegend: false
      }
    },
    series: [{
      name: 'CT ARM',
      mod: 'CT',
      data: [7.0, 6.9, 9.5],
      bodyPart: 'arm'
    }, {
      name: 'MRI BRAIN',
      mod: 'MRI',
      data: [-0.2, 0.8, 5.7],
      bodyPart: 'brain'
    }, {
      name: 'MRI WRIST',
      mod: 'MRI',
      data: [-0.9, 0.6, 3.5],
      bodyPart: 'wrist'
    }, {
      name: 'PET THYROID',
      mod: 'PET',
      data: [3.9, 4.2, 5.7],
      bodyPart: 'thyroid'
    }, {
      name: 'PET BRAIN',
      mod: 'PET',
      data: [1.9, 6.2, 2.7],
      bodyPart: 'brain'
    }, {
      name: 'PET HEART',
      mod: 'PET',
      data: [7.9, 1.2, 7],
      bodyPart: 'heart'
    }]
  }, function(chart) {
    $('.mod').change(function() {
      mod = this.value;
      if (mod) {
        Highcharts.each(chart.series, function(ob, j) {
          if (ob.userOptions.mod == mod && (bodyP ? ob.userOptions.bodyPart == bodyP : true)) {
            ob.show()
          } else {
            ob.hide()
          }
        });
      }
    });

    $('.body').change(function() {
      bodyP = this.value;
      if (bodyP) {
        Highcharts.each(chart.series, function(ob, j) {
          if (ob.userOptions.bodyPart == bodyP && (mod ? ob.userOptions.mod == mod : true)) {
            ob.show()
          } else {
            ob.hide()
          }
        });
      }
    })
  });
});

您可以为它使用加载回调函数(当您的图表加载时)。然后，当删除您的系列之一时，更改系列索引不会有任何问题。

如您所见，每次更改后我都会检查表单中的值。

在这里你可以看到一个例子它是如何工作的: http://jsfiddle.net/2q1376Le/2/

如果你愿意，你也可以删除和添加满足你要求的系列，但我认为这会是一个更复杂的问题，这完全取决于你的数据量。

在这里您可以看到制作图表的第二种方法:

$(function() {
  var mod, bodyP, exist,
    series = [{
      name: 'CT ARM',
      mod: 'CT',
      data: [7.0, 6.9, 9.5],
      bodyPart: 'arm'
    }, {
      name: 'MRI BRAIN',
      mod: 'MRI',
      data: [-0.2, 0.8, 5.7],
      bodyPart: 'brain'
    }, {
      name: 'MRI WRIST',
      mod: 'MRI',
      data: [-0.9, 0.6, 3.5],
      bodyPart: 'wrist'
    }, {
      name: 'PET THYROID',
      mod: 'PET',
      data: [3.9, 4.2, 5.7],
      bodyPart: 'thyroid'
    }, {
      name: 'PET BRAIN',
      mod: 'PET',
      data: [1.9, 6.2, 2.7],
      bodyPart: 'brain'
    }, {
      name: 'PET HEART',
      mod: 'PET',
      data: [7.9, 1.2, 7],
      bodyPart: 'heart'
    }];
  $('#container').highcharts({
    series: []
  }, function(chart) {
    $('.mod').change(function() {
      mod = this.value;
      if (mod) {
        for (var i = chart.series.length - 1; i >= 0; i--) {
          if (!(chart.series[i].userOptions.mod == mod && (bodyP ? chart.series[i].userOptions.bodyPart == bodyP : true))) {
            chart.series[i].remove();
          }
        };
        Highcharts.each(series, function(p, i) {
          Highcharts.each(chart.series, function(ob, j) {
            if (ob.name == p.name) {
              exist = true;
            }
          })
          if (!exist && p.mod == mod && (bodyP ? p.bodyPart == bodyP : true)) {
            chart.addSeries(p);
          }
          exist = false;
        })
      }
    });


    $('.body').change(function() {
      bodyP = this.value;
      if (bodyP) {
        for (var i = chart.series.length - 1; i >= 0; i--) {
          if (!(chart.series[i].userOptions.bodyPart == bodyP && (mod ? chart.series[i].userOptions.mod == mod : true))) {
            chart.series[i].remove();
          }
        };
        Highcharts.each(series, function(p, i) {
          Highcharts.each(chart.series, function(ob, j) {
            if (ob.name == p.name) {
              exist = true
            }
          });
          if (!exist && p.bodyPart == bodyP && (mod ? p.mod == mod : true)) {
            chart.addSeries(p);
          }
          exist = false;
        })
      }
    });

  });
});

如您所见，我并未将所有数据添加到图表中。我只添加在表单内选择的数据。问题是我不仅要遍历我的图表系列(检查是否应该删除它)，还要遍历所有未添加的系列(检查我是否应该添加它)。

您可以在此处查看此代码如何工作的示例: http://jsfiddle.net/2q1376Le/4/

亲切的问候

更新:如果您只想在数据中包含三个系列和信息，您也可以这样做，稍微更改一下我的代码。

mod 部分几乎相同，因为 mod 直接与系列相连。

您的 bodyPart 参数对于每个点都是特定的，因此您需要遍历所有系列和所有系列点以检查此参数是否正确:

$('.body').change(function() {
  bodyP = this.value, dataPoints;
  for (var i = chart.series.length - 1; i >= 0; i--) {
    chart.series[i].remove();
  };
  Highcharts.each(series, function(p, i) {
    if (mod ? p.mod == mod : true) {
      dataPoints = [];
      Highcharts.each(p.data, function(ob, j) {
        if (ob.bodyPart == bodyP) {
          dataPoints.push(ob);
        }
      });
      if (mod ? p.mod == mod : true) {
        chart.addSeries({
          name: p.name,
          mod: p.mod,
          data: dataPoints
        })
      }
    }
  });
});

在这里你可以看到一个例子它是如何工作的: http://jsfiddle.net/2q1376Le/9/