在高图表中筛选数据

Filter data in Highcharts

本文关键字：数据 筛选 高图表      更新时间：2023-09-26

>我有三个选择菜单：模态、车身部位和设备型号，我想做的是：当用户选择模态时，它只显示该模态的数据，其次显示可用于该模态的车身部件，最后出现设备可用于所选身体部位和模态的型号。当用户选择这 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 开始计数。

我该如何解决这个问题？

提前谢谢。

我认为您可以通过两种方式制作图表。首先，您可以将所有系列添加到图表中，并使用series.hide（）和series.show（）来隐藏和显示过滤后的数据。http://api.highcharts.com/highcharts#Series.hidehttp://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/

相关文章：