在Highcharts中篩選數據

Question

我有三種選擇菜單：模態，bodyPart和equipmentModel，我想要做的是：當用戶選擇一種模態時，僅顯示該模態的數據，其次出現可用於該模態的bodyParts並最終將設備模型用於bodyPart和選擇的模態。 當用戶選擇這3個菜單時，數據在圖表中被過濾（高圖）。

我的數據格式：

[ 
    { 
    "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直接與系列連接。

你的身體部分的參數是具體的每一個點，所以你需要遍歷所有的系列，並在所有這一系列的點檢查，如果該參數是正確的：

$('.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/