How to hide data in a series in highcharts boxplot?(如何在HighChats框图中隐藏系列中的数据?)
问题描述
我有一个用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或任何其他方法。
推荐答案
我找到了解决方案。显然,有两种使用系列设置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,
}
},
这篇关于如何在HighChats框图中隐藏系列中的数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:如何在HighChats框图中隐藏系列中的数据?
基础教程推荐
- 当木偶师打开Chrome时,不能使用Chrome扩展 2022-01-01
- 带角度的选项卡:仅使用 $http 在单击时加载选项卡 2022-01-01
- 从快速中间件中排除路由 2022-01-01
- HTML5 画布调整为父级 2022-01-01
- 在 Javascript 中使用 Fetch API 上传文件并显示进度 2022-01-01
- 逻辑运算符 ||在 javascript 中,0 代表 Boolean false? 2022-01-01
- 使用 jQuery 在悬停时交换 DIV 类 2022-01-01
- 即使每次插入第一个输入的值不同,第二个输入仍显示相同的输入值 2022-01-01
- CORS:当凭据标志为真时,无法在 Access-Control-Allow-Origin 中使用通配符 2022-01-01
- 最佳动态 JavaScript/JQuery 网格 2022-01-01
