个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
所以，我试图在 highchart 中复制此图表，但我无法使平均线遵循如图所示的结果 
这是我编写的脚本:
Highcharts.chart('container', {
chart: {
type: 'boxplot'
},
title: {
text: 'Highcharts Box Plot Example'
},
legend: {
enabled: false
},
xAxis: {
categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36'],
title: {
text: 'Position in read (bp)'
}
},
yAxis: {
title: {
text: 'Phred Score'
},
plotLines: [{
value: 33.84367666502835,
color: 'red',
width: 1,
label: {
text: 'Theoretical mean',
align: 'center',
style: {
color: 'gray'
}
}
}]
},
series: [{
name: 'Base',
data: [
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[36.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0]
],
}]
});
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
当我尝试添加每个 yAxis 值的所有平均分数时，图表不会呈现:
Highcharts.chart('container', {
chart: {
type: 'boxplot'
},
title: {
text: 'Highcharts Box Plot Example'
},
legend: {
enabled: false
},
xAxis: {
categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36'],
title: {
text: 'Position in read (bp)'
}
},
yAxis: {
title: {
text: 'Phred Score'
},
plotLines: [{
value: 33.84367666502835,33.89697626283254,33.897253161840545,33.92746630485196,33.92058190326533,37.64551388994649,37.631038994302806,37.64324331808081,37.599534809666544,37.63804107796784,37.615328436835874,37.51758654824619,37.53457430238756,37.567487210727066,37.58483839481645,37.53966578289733,37.57403241102889,37.59610472320483,37.5506136774265,37.532234505769885,37.551845878012145,37.55333767141779,37.56077587102044,37.59732307884007,37.595734370781614,37.60087776985539,37.53931619789972,37.51814380749981,37.49217414178614,37.31087105505445,37.479839396520255,37.51636923463617,37.55800419733795,37.49646972822706,37.573816951303336,37.59177038226607,
color: 'red',
width: 1,
label: {
text: 'Theoretical mean',
align: 'center',
style: {
color: 'gray'
}
}
}]
},
series: [{
name: 'Base',
data: [
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[36.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0]
],
}]
});
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
http://jsfiddle.net/9d10x2co/1/
你们能帮我吗？
最佳答案
绘图线只能是直线，因此不会出现弯曲的线。您需要使用renderer.path渲染一条线。路径的坐标可以通过 axis.toPixels 获得(x 和 y 坐标)。
function renderMean() {
const chart = this
const values = [33.84367666502835, 33.89697626283254, 33.897253161840545, 33.92746630485196, 33.92058190326533, 37.64551388994649, 37.631038994302806, 37.64324331808081, 37.599534809666544, 37.63804107796784, 37.615328436835874, 37.51758654824619, 37.53457430238756, 37.567487210727066, 37.58483839481645, 37.53966578289733, 37.57403241102889, 37.59610472320483, 37.5506136774265, 37.532234505769885, 37.551845878012145, 37.55333767141779, 37.56077587102044, 37.59732307884007, 37.595734370781614, 37.60087776985539, 37.53931619789972, 37.51814380749981, 37.49217414178614, 37.31087105505445, 37.479839396520255, 37.51636923463617, 37.55800419733795, 37.49646972822706, 37.573816951303336, 37.59177038226607]
const xAxis = chart.xAxis[0]
const yAxis = chart.yAxis[0]
const points = values.map((v, i) => [xAxis.toPixels(i), yAxis.toPixels(v)])
points.splice(0, 0, 'M')
points.splice(2, 0, 'L')
const d = points.reduce((d, p) => {
return d.concat(p)
}, [])
if (!this.tMean) {
this.tMean = chart.renderer.path(d).add().attr({
'stroke-width': 1,
stroke: 'red'
})
} else {
this.tMean.animate({
d
})
}
}
在加载/重绘事件上附加函数:
chart: {
type: 'boxplot',
events: {
load: renderMean,
redraw: renderMean
}
},
示例:http://jsfiddle.net/c9zdt6ay/
关于javascript - 带平均线的 HighChart 箱线图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45024600/
25
4
0
运行 PostgreSQL(7.4 和 8.x)，我认为这是可行的，但现在我遇到了错误。 我可以单独运行查询，它工作得很好，但如果我使用 UNION 或 UNION ALL，它会抛出错误。 这个错误:
我试图为我的应用程序创建一个导航，使用抽屉导航我的 fragment 之一(HomeFragment)有一个 ViewPager，可容纳 3 个 fragment (Bundy Clock、Annou
以我目前正在开发的应用为例: - 它有一个包含多个项目的抽屉导航；现在有两个项目让我感兴趣，我将它们称为 X 和 Y。 X 和 Y 都在单击时显示包含 x 元素或 y 元素列表的 fragment 选
我有一个形状为 (370,275,210) 的 NumPy 数组，我想将其重新整形为 (275,210,370)。我将如何在 Python 中实现这一点？ 370是波段数，275是行数，210是图像包
我们如何与被子 UIViewController 阻止的父 UIViewController(具有按钮)交互。显然，触摸事件不会通过子 Nib 。 (启用用户交互) 注意:我正在加载默认和自定义 NI
我是 Jpa 新手，我想执行过程 我的代码如下 private static final String PERSISTENCE_UNIT_NAME = "todos"; private static
与安装了 LAMP 的 GCE 相比，选择与 Google Cloud SQL 链接的 GCE 实例有哪些优势？ 我确定 GCE 是可扩展的，但是安装在其上的 mysql 数据库的可扩展性如何？ 使用
这个问题在这里已经有了答案: Value receiver vs. pointer receiver (3 个答案) 关闭 3 年前。 我刚接触 golang。只是想了解为 Calc 类型声明的两种
我不小心按了一个快捷键，一个非常漂亮的断线出现在日期上。 有点像 # 23 Jun 2010 -------------------- 有人知道有问题的快捷方式吗？？ (我在 mac 上工作!) 在
我正在Scala中编写正则表达式 val regex = "^foo.*$".r 这很好，但是如果我想做 var x = "foo" val regex = s"""^$x.*$""".r 现在我们有
以下 XML 文档在技术上是否相同？ James Dean 19 和: James Dean 19 最佳答案 这两个文档在语义上是相同的。在 X
我在对数据帧列表运行稳健的线性回归模型(使用 MASS 库中的 rlm)时遇到问题。 可重现的示例: var1 <- c(1:100) var2 <- var1*var1 df1 <- data.f
好的，我有一个自定义数字键盘，可以在标签(numberField)中将数字显示为 0.00，现在我需要它显示 $0.00。 NSString *digit = sender.currentTitle;
在基于文档的应用程序中，使用 XIB 文件，创建新窗口时其行为是: 根据最后一个事件的位置进行定位和调整大小 window 。 如果最后一个事件窗口仍然可见，则新窗口 窗口应该是级联的，这样它就不会直
我想使用参数进行查询，如下所示: SELECT * FROM MATABLE WHERE MT_ID IN (368134, 181956) 所以我考虑一下 SELECT * FROM MATABLE
我遇到一些性能问题。 我有一个大约有 200 万行的表。 CREATE TABLE [dbo].[M8]( [M8_ID] [int] IDENTITY(1,1) NOT NULL,
我在 jquery 中的按键功能遇到问题。我不知道为什么按键功能不起作用。我已经使用了正确的 key 代码。在我的函数中有 2 个代码，其中包含 2 个事件键，按一个键表示 (+) 代码 107 和(
我想显示音频波形，我得到了此代码，它需要.raw音频输入并显示音频波形，但是当我放入.3gp，.mp3音频时，我得到白噪声，有人可以帮助我如何使其按需与.3gp一起使用使用.3gp音频运行它。 Inp
我无法让 stristr 函数返回真值，我相信这是因为我的搜索中有一个 $ 字符。 当我这样做时: var_dump($nopricecart); 完整的 $nopricecart 值是 $0 ，我得
如果我有这样的循环: for(int i=0;i O(n) 次。所以do some执行了O(n)次。如果做某事是线性时间，那么代码片段的复杂度是O(n^2)。 关于algorithm - 带 If 语
我是一名优秀的程序员,十分优秀！