javascript - 同步 3 个 Highcharts 趋势视图
问题描述
我正在寻找与同步 3 个类似于此的折线图的帮助:http: //jsfiddle.net/v2t171og/
这是我的代码:
https://codepen.io/anon/pen/EerNyO
(function() {
var files = ["https://code.highcharts.com/stock/highstock.js", "https://code.highcharts.com/highcharts-more.js", "https://code.highcharts.com/highcharts-3d.js", "https://code.highcharts.com/modules/data.js", "https://code.highcharts.com/modules/exporting.js", "https://code.highcharts.com/modules/funnel.js", "https://code.highcharts.com/modules/annotations.js", "https://code.highcharts.com/modules/solid-gauge.js"],
loaded = 0;
if (typeof window["HighchartsEditor"] === "undefined") {
window.HighchartsEditor = {
ondone: [cl],
hasWrapped: false,
hasLoaded: false
};
include(files[0]);
} else {
if (window.HighchartsEditor.hasLoaded) {
cl();
} else {
window.HighchartsEditor.ondone.push(cl);
}
}
function isScriptAlreadyIncluded(src) {
var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
if (scripts[i].hasAttribute("src")) {
if ((scripts[i].getAttribute("src") || "").indexOf(src) >= 0 || (scripts[i].getAttribute("src") === "http://code.highcharts.com/highcharts.js" && src === "https://code.highcharts.com/stock/highstock.js")) {
return true;
}
}
}
return false;
}
function check() {
if (loaded === files.length) {
for (var i = 0; i < window.HighchartsEditor.ondone.length; i++) {
try {
window.HighchartsEditor.ondone[i]();
} catch (e) {
console.error(e);
}
}
window.HighchartsEditor.hasLoaded = true;
}
}
function include(script) {
function next() {
++loaded;
if (loaded < files.length) {
include(files[loaded]);
}
check();
}
if (isScriptAlreadyIncluded(script)) {
return next();
}
var sc = document.createElement("script");
sc.src = script;
sc.type = "text/javascript";
sc.onload = function() {
next();
};
document.head.appendChild(sc);
}
function each(a, fn) {
if (typeof a.forEach !== "undefined") {
a.forEach(fn);
} else {
for (var i = 0; i < a.length; i++) {
if (fn) {
fn(a[i]);
}
}
}
}
var inc = {},
incl = [];
each(document.querySelectorAll("script"), function(t) {
inc[t.src.substr(0, t.src.indexOf("?"))] = 1;
});
function cl() {
if (typeof window["Highcharts"] !== "undefined") {
var options = {
"chart": {
"type": "line",
"height": 220,
"polar": false
},
"rangeSelector": {
"enabled": false
},
"title": {
"text": ""
},
"scrollbar": {
"enabled": false
},
"subtitle": {
"text": ""
},
"series": [{
"name": "RMS",
"_colorIndex": 0,
"_symbolIndex": 0,
"turboThreshold": 0,
"marker": {}
}, {
"name": "Minimum",
"_colorIndex": 1,
"_symbolIndex": 1
}, {
"name": "Maximum",
"_colorIndex": 2,
"_symbolIndex": 2
}, {
"name": "Threshold",
"_colorIndex": 3,
"_symbolIndex": 3
}],
"data": {
"csv": "\"Movement\";\"RMS\";\"Minimum\";\"Maximum\";\"Threshold\"\n1;12.87;12;15;14\n2;13.16;12;15;14\n3;12.92;12;15;14\n4;13.14;12;15;14\n5;12.88;12;15;14\n6;13.03;12;15;14\n7;12.76;12;15;14\n8;13.04;12;15;14\n9;12.72;12;15;14\n10;13.2;12;15;14",
"googleSpreadsheetKey": false,
"googleSpreadsheetWorksheet": false
},
"yAxis": [{
"title": {}
}],
"navigator": {
"adaptToUpdatedData": true,
"enabled": false
},
"pane": {
"background": []
},
"responsive": {
"rules": []
},
"plotOptions": {
"series": {
"animation": false
}
}
};
new Highcharts.StockChart("highcharts-aaf432a9-4966-4429-b3eb-d35fe01e2924", options);
}
}
})();
我已经创建了图表,但我无法使用 highcharts 事件或细线连接它们。
任何援助将不胜感激。
解决方案
首先,您应该查看控制台,那里有一些错误,与脚本的位置有关。接下来,您需要将highlight
方法更改为onMouseOver
:
$('#container').bind('mousemove touchmove touchstart', function(e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i++) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.onMouseOver(e);
}
}
});
API:https ://api.highcharts.com/class-reference/Highcharts.Point#onMouseOver
现场演示:http: //jsfiddle.net/BlackLabel/0gmrf64y/
推荐阅读
- python - 重命名熊猫数据框中的一百个或更多列名
- python - Json 到 django 模型。Python 数据类型错误
- javascript - 如何在 EJS 中实现 CSS 文件
- netsuite - 有没有办法在 NetSuite 上的已保存搜索中搜索多个关键字?
- typo3 - 如何在我们的本地机器上设置现有的 TYPO3 项目?
- javascript - Angular Karma - TypeError:无法读取未定义的属性“_id”
- android - 如何添加 android 的多个不同的 firebase api 密钥以使用解析服务器发送推送?
- jwt - 如何在前端安全地存储 JWT
- c - 获取正确的 sscanf 格式以打印字符串和整数
- amazon-web-services - 我创建了一个 ECS 容器,如何将域绑定到它?