javascript - 多个 y 轴上的 HighStocks 注释
问题描述
我在 highstocks 中有一个多 y 轴图，我需要为每个 y 轴添加注释。
链接到小提琴：https ://jsfiddle.net/7n5eaqtg/1/
<html>
<head>
<link
rel="stylesheet"
type="text/css"
href="https://code.highcharts.com/css/stocktools/gui.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://code.highcharts.com/css/annotations/popup.css"
/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.src.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>
<script src="https://code.highcharts.com/modules/stock-tools.src.js"></script>
<style>
.chart:-webkit-full-screen {
width: 100%;
height: 100%;
}
.chart:-moz-full-screen {
width: 100%;
height: 100%;
}
.chart:-ms-fullscreen {
width: 100%;
height: 100%;
}
.chart:fullscreen {
width: 100%;
height: 100%;
}
/* GENERAL */
.chart {
float: left;
max-height: 800px;
height: 75vh;
position: relative;
width: 100%;
}
.highcharts-draw-mode {
cursor: crosshair;
}
</style>
</head>
<body>
<div id="container" class="chart"></div>
</body>
<script>
var qrs = [];
var hr = [];
var imp = [];
var res = [];
for (var i = 0; i < 14; i++) {
qrs.push(0);
qrs.push(0);
qrs.push(0);
qrs.push(0);
qrs.push(0);
qrs.push(-0.5);
qrs.push(0.5);
qrs.push(-0.5);
qrs.push(0.5);
qrs.push(-0.5);
qrs.push(5);
qrs.push(-3);
qrs.push(0);
}
hr = [
138,
138,
138,
137,
137,
136,
136,
136,
135,
135,
135,
134,
134,
133,
132,
131,
130,
130,
130,
130,
129,
129,
129,
128,
128,
127,
126,
125,
124,
122,
122,
121,
121,
120,
120,
120,
120,
119,
119,
119,
119,
118,
117,
116,
115,
115,
114,
114,
113,
112,
111,
110,
109,
108,
107,
106,
105,
105,
103,
102,
103,
104,
105,
106,
107,
108,
109,
110,
111,
112,
113,
114,
115,
116,
117,
118,
119,
120,
121,
125,
128,
135,
140,
145,
150,
155,
160,
165,
170,
175,
180,
190,
195,
200,
210,
220,
220,
230,
231,
232,
233,
234,
235,
236,
237,
238,
239,
239,
239,
238,
237,
237,
235,
234,
233,
230,
225,
220,
215,
210,
205,
200,
195,
194,
194,
190,
185,
180,
175,
170,
165,
160,
155,
150,
145,
140,
135,
130,
125,
120,
114,
114,
113,
113,
112,
111,
111,
111,
111,
110,
110,
110,
110,
109,
109,
109,
109,
108,
107,
107,
107,
107,
105,
105,
104,
104,
104,
104,
104,
104,
104,
104,
104,
104,
104,
104,
];
imp = [
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
0.3,
0.2,
];
res = [
52,
52,
51,
51,
51,
50,
50,
50,
49,
49,
49,
48,
47,
46,
46,
45,
45,
43,
42,
42,
41,
41,
40,
40,
40,
40,
39,
38,
37,
36,
35,
34,
33,
32,
31,
31,
31,
31,
30,
31,
31,
31,
31,
31,
31,
31,
31,
31,
32,
32,
32,
32,
32,
32,
32,
32,
33,
33,
33,
33,
34,
34,
34,
34,
34,
34,
35,
35,
35,
35,
35,
35,
35,
35,
35,
35,
36,
36,
36,
36,
36,
36,
36,
36,
36,
37,
37,
37,
37,
37,
37,
37,
37,
37,
37,
38,
38,
38,
38,
38,
38,
38,
38,
39,
39,
39,
39,
39,
39,
40,
40,
40,
40,
40,
40,
40,
40,
41,
41,
41,
41,
41,
41,
41,
42,
42,
42,
42,
42,
42,
43,
43,
43,
43,
43,
43,
43,
43,
44,
43,
43,
43,
43,
43,
44,
44,
44,
44,
44,
44,
45,
45,
45,
45,
45,
45,
45,
45,
46,
46,
46,
46,
46,
47,
47,
47,
47,
47,
48,
49,
49,
49,
49,
49,
49,
49,
49,
49,
49,
49,
49,
49,
49,
];
chartOptions = {
yAxis: [
{
marker: {
enabled: false,
},
name: "QRS",
color: "#ff0000",
height: "25%",
resize: {
enabled: true,
},
min: -10,
max: 10,
labels: {
enabled: false,
},
},
{
marker: {
enabled: false,
},
name: "HR",
color: "#034d00",
top: "25%",
height: "25%",
resize: {
enabled: true,
},
min: 0,
max: 300,
showEmpty: false,
labels: {
enabled: true,
align: "left",
},
plotLines: [
{
color: "red", // Color value
dashStyle: "longdashdot", // Style of the plot line. Default to solid
value: 100, // Value of where the line will appear
width: 1, // Width of the line
},
{
color: "red", // Color value
dashStyle: "longdashdot", // Style of the plot line. Default to solid
value: 250, // Value of where the line will appear
width: 1, // Width of the line
},
],
},
{
marker: {
enabled: false,
},
yAxis: 2,
name: "Impedence",
color: "#001aff",
top: "50%",
height: "25%",
resize: {
enabled: true,
},
min: -2,
max: 2,
labels: {
enabled: false,
},
},
{
marker: {
enabled: false,
},
yAxis: 3,
name: "Resp. Rate",
color: "#ff002f",
top: "75%",
height: "25%",
resize: {
enabled: true,
},
min: 0,
max: 100,
},
],
series: [
{
type: "line",
id: "qrs",
name: "QRS",
data: qrs,
yAxis: 0,
color: "#ff0000",
},
{
type: "spline",
id: "hr",
name: "HR",
data: hr,
yAxis: 1,
color: "#008000",
},
{
type: "spline",
id: "imp",
name: "Imp",
data: imp,
yAxis: 2,
color: "#0000FF",
},
{
type: "spline",
id: "res",
name: "Res",
data: res,
yAxis: 3,
color: "#008000",
},
],
tooltip: {
//shared: true,
crosshairs: true,
shape: "square",
headerShape: "callout",
borderWidth: 0,
shadow: false,
positioner: function (width, height, point) {
var chart = this.chart,
position;
if (point.isHeader) {
position = {
x: Math.max(
// Left side limit
chart.plotLeft,
Math.min(
point.plotX + chart.plotLeft - width / 2,
// Right side limit
chart.chartWidth - width - chart.marginRight
)
),
y: point.plotY,
};
} else {
position = {
x: point.series.chart.plotLeft,
y: point.series.yAxis.top - chart.plotTop,
};
}
return position;
},
pointFormatter: function () {
var tooltip = null;
var state = this.series.name == "HR" || this.series.name == "Res";
if (state) {
tooltip =
'<span style="color:' +
this.color +
'">\u25CF</span> ' +
this.series.name +
": <b>" +
this.y +
"</b><br/>";
}
return tooltip;
},
},
legend: {
enabled: true,
},
responsive: {
rules: [
{
condition: {
maxWidth: 800,
},
chartOptions: {
rangeSelector: {
inputEnabled: false,
},
},
},
],
},
annotations: [
{
langKey: "measure",
type: "measure",
typeOptions: {
xAxis: 0,
yAxis: 0,
selectType: "x",
point: {
x: 5.040849673202615,
y: 0,
},
crosshairX: {
strokeWidth: 1,
stroke: "#000000",
enabled: false,
},
crosshairY: {
enabled: false,
strokeWidth: 0,
stroke: "#000000",
},
background: {
width: 10,
height: 0,
strokeWidth: 0,
stroke: "#ffffff",
},
},
labelOptions: {
style: {
color: "#666666",
},
},
},
],
};
Highcharts.stockChart("container", chartOptions);
</script>
</html>
您可以在第一个 y 轴上看到注释，我的目标是为每个 y 轴创建一个。注释需要具有“测量x”注释的功能，以便它可以显示最小/最大标签并可以拖动。
任何帮助，将不胜感激。
解决方案
推荐阅读
- ruby-on-rails - Heroku buliid 在 Bundler 版本上失败，无论安装哪个
- regex - 仅在 sed 或 awk 匹配后替换空格
- c++ - C++ / SFML：使用两个递归调用将凸形打印到屏幕上仅显示第一个递归调用的形状，而不是第二个
- vue.js - 在Vue JS中根据ID悬停时显示Div
- polymer-1.0 - Polymer 中的“变量命名空间未声明”错误
- java - 我的结果集返回 0 条记录，但数据库具有该值，当在 mysql 中运行相同的 mysql 查询时返回 1
- git - 从 Git 中的裸存储库中删除文件
- node.js - 如何构建一个对象并将其存储为 postgres 上的 hstore 类型
- html - CKEditor Codesnippet 的背景没有滚动过去长度
- java - 枚举感知的 ServiceLoader 实现？