在 Highcharts 中过滤数据

Question

我有三个选择菜单：模态、bodyPart 和设备模型，我想要做的是：当用户选择一个模态时，它只显示该模态的数据，其次出现该模态可用的 bodyParts，最后是该模态可用的设备模型选择了 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/