如何在HighChats框图中隐藏系列中的数据?

2022-05-28 00:00:00 boxplot javascript highcharts

我有一个用HighChats制作的盒子图,我有两个系列,一个是观察值,一个是离群值。我想在这两个系列中都隐藏一列,但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]
  ]
 }
]

此结构有两个系列,第一个系列具有盒子图的盒子,第二个系列具有离群值。在其他图表中,如柱状图,您可以将每列添加为series,这为我提供了更多操作它们的选项,但在这里,我将每列作为data数组对象。在HighChats中,您可以通过触发系列上的hide()函数来隐藏系列,但您不能隐藏data对象,只能删除它们。我要做的是隐藏单个数据数组对象,使其不会在视图中呈现。

作为一种解决办法,我可以从技术上从data数组中删除我想要的对象,并将其保存在其他地方,直到我需要它为止,但我想知道是否有更好的方法来做到这一点,比如使用plotPoints或任何其他方法。

Here's also a demo from the highcharts website.这里的数据是一个数组,但data API above中的任何内容仍然对它们起作用。以下是series api以供比较。


解决方案

我找到了解决方案。显然,有两种使用系列设置BoxPlot图表的替代方法(您可以使用图例或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,
  }
},


相关文章