如何在高图箱图中隐藏一系列数据?

时间:2019-07-15 15:39:52

标签: javascript highcharts boxplot

我有一个用高图制作的箱线图,我有2个系列,一个用于观察,一个用于离群值。我想在两个系列中都隐藏一列,但是going through the API似乎没有隐藏数据行的方法,只能删除一个。有没有办法用API来做到这一点,而不必绕开它呢?

编辑:有关结构的一些示例:

series: [{
 name: 'Observations',
 data: [{
    x: 0,
    low: 4,
    q1: 9,
    median: 9,
    q3: 1,
    high: 10,
    name: "Point2",
    color: "#00FF00"
 }, {
    x: 1,
    low: 5,
    q1: 7,
    median: 3,
    q3: 6,
    high: 2,
    name: "Point1",
    color: "#FF00FF"
 }]},
 {
  name: 'Outliers',
  type: 'scatter',
  data: [
   [0, 2],
   [1, 5]
  ]
 }
]

此结构有2个系列,第一个系列具有箱线图的框,第二个系列具有离群值。在其他图形中,例如柱形图,您可以将每个列添加为series,这为我提供了更多操作它们的选项,但是在这里,我将每个列都作为data数组对象。在Highcharts中,可以通过触发序列上的hide()函数来隐藏序列,但是不能隐藏data对象,只能删除它们。我想做的是隐藏单个数据数组对象,使其无法在视图中呈现。

作为一种解决方法,我可以从data数组中删除所需的对象,然后将其保存到其他位置,直到需要它为止,但是我想知道是否有更好的方法可以这样做,也许使用plotPoints或其他任何方式。

Here's also a demo from the highcharts website.这里的数据是一个数组,但是data API above中的所有内容仍然可以在它们上面使用。这是series api供比较。

2 个答案:

答案 0 :(得分:0)

您可以从setVisible系列原型的pointClass借用pie方法:

var pieSetVisible = Highcharts.seriesTypes.pie.prototype.pointClass.prototype.setVisible,
    point1 = chart.series[0].points[0],
    point2 = chart.series[1].points[0];

pieSetVisible.call(point1);
pieSetVisible.call(point2);

实时演示: http://jsfiddle.net/BlackLabel/ahckoLn5/

答案 1 :(得分:0)

我找到了解决方案。显然,有两种使用序列设置箱形图的替代方法(您可以使用图例或hide()show()方法隐藏和显示):

series: [{
 name: 'Series 1',
 data: [{
    x: 0,
    low: 4,
    q1: 9,
    median: 9,
    q3: 1,
    high: 10,
    name: "Point x1",
    color: "#00FF00"
 }, {
  type: 'scatter', 
  data: [[0, 1], [0,2]] // outlier points
 }]},
 {
  name: 'Series 2',
  data: [{
    x: 1,
    low: 5,
    q1: 7,
    median: 3,
    q3: 6,
    high: 2,
    name: "Point x2",
    color: "#FF00FF"
 }]
 // no outliers here
 }
]

基本上,您可以通过将异常值type: 'scatter'设置为一个序列/列,将观察值和异常值放在一个系列/列中。这种方法的问题在于,由于某些原因,您仍然无法通过调用hide()show()方法来隐藏异常值。

另一种方法是将每个列观察值和每个离群值观察值放在一个单独的序列中,并赋予两个相同的x值(离群值应为x,在此示例中为0 ):

series: [{
 name: 'Series 1',
 data: [{
    x: 0,
    low: 4,
    q1: 9,
    median: 9,
    q3: 1,
    high: 10,
    name: "Point x1",
    color: "#00FF00"
 }]},
 {
  type: 'scatter', 
  name: 'Series 2: Outliers',
  data: [[0, 1], [0,2]]
 }
 {
  name: 'Series 3',
  data: [{
    x: 1,
    low: 5,
    q1: 7,
    median: 3,
    q3: 6,
    high: 2,
    name: "Point x2",
    color: "#FF00FF"
 }]
 }
]

要相互叠加观察值和离群值,必须在选项中禁用分组:

plotOptions: {
  series: {
    grouping: false,
  }
},