Highcharts水平同步图表 [英] Highcharts Sync charts horizontally
本文介绍了Highcharts水平同步图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图构建一个同步图表，但是水平对齐，我是这样做的：
http://www.highcharts.com/demo/synchronized-charts
我做了对齐水平，现在图表不同步
/ *这个演示的目的是演示如何将多个图表放在一起通过DOM和Highcharts事件和API方法可以链接相同的页面。它需要一个标准的Highcharts配置，每个数据集都有一个asmall变体，并且一个鼠标/触摸事件处理程序将图表绑定在一起。* / $（function（）{/ ** *为了同步工具提示和十字准线，内置事件与在父元素上定义的处理程序* / $（'＃container'）。bind（'mousemove touchmove touchstart'，function（e）{var chart，point，i，event; for（i = 0; i< Highcharts.charts.length; i = i + 1）{chart = Highcharts.charts [i]; event = chart.pointer.normalize（e.originalEvent）; //在图表中查找坐标point = chart.series [0] .searchPoint（event，true）; //获取悬停点if（point）{point.highlight（e）;}}}）; / ** *覆盖重置函数，我们不需要隐藏工具提示和十字线。* / Highcharts.Pointer.prototype.reset = function（）{retu未定义; }; / ** *通过显示工具提示，设置悬停状态并绘制十字线来突出显示一个点* / Highcharts.Point.prototype.highlight = function（event）{this.onMouseOver（）; //显示悬停标记this.series.chart.tooltip.refresh（this）; //显示工具提示this.series.chart.xAxis [0] .drawCrosshair（event，this）; //显示十字线}; / ** *通过setExtremes事件处理程序同步缩放。 * / function syncExtremes（e）{var thisChart = this.chart;如果（e.trigger！=='syncExtremes'）{//防止反馈循环Highcharts.each（Highcharts.charts，function（chart）{if（chart！== thisChart）{if（chart.xAxis [0] .setExtremes ）{//更新chart.xAxis [0] .setExtremes（e.min，e.max，undefined，false，{trigger：'syncExtremes'}）;}}}）; }} //获取数据。数据文件的内容可以在https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json $ .getJSON（'https://www.highcharts.com/ samples / data / jsonp.php？filename = activity.json& callback =？'，function（activity）{$ .each（activity.datasets，function（i，dataset）{//添加X值dataset.data = Highcharts。 map（dataset.data，function（val，j）{return [activity.xData [j]，val];}）; $（'< div class =chartstyle =width：200px; float：left; >'）.appendTo（'＃container'）.highcharts（{chart：{marginLeft：40，//保留所有的图表左对齐，spacingTop：20，spacingBottom：20}，title：{text：dataset.name，align ：'left'，margin：0， x：30}，学分：{enabled：false}，legend：{enabled：false}，xAxis：{crosshair：true，events：{setExtremes：syncExtremes}，labels：{format：'{value} km'}} yAxis：{title：{text：null}}，tooltip：{positioner：function（）{return {x：this.chart.chartWidth - this.label.width，//右对齐y：-1 //对齐标题}; }，borderWidth：0，backgroundColor：'none'，pointFormat：'{point.y}'，headerFormat：''，shadow：false，style：{fontSize：'18px'}，valueDecimals：dataset.valueDecimals}，series： [{data：dataset.data，name：dataset.name，type：dataset.type，color：Highcharts.getOptions（）。colors [i]，fillOpacity：0.3，tooltip：{valueSuffix：''+ dataset.unit}} ]}）; }）; }};}）;
.chart {}< / style><！ - http://doc.jsfiddle.net/use/hacks.html#css-panel-hack - >< meta name =viewportcontent =width = device-width， initial-scale = 1/>< style>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =https：// code.highcharts.com/highcharts.js\"></script><div id =container>< / div>
任何帮助都很重要，
预先感谢。
解决方案
通过添加以下代码，可以在每个图表中找到coordiantes之后编辑 event.chartX p>
event.chartX =（event.chartX + 600）％200;
添加 600 以避免负值和％由 200 ，因为每个图表都有 200px 的宽度。
示例： http://jsfiddle.net/fzda6z8p/
相关代码部分：
$（'＃container'）。bind（'mousemove touchmove touchstart'，function（e ）{
var chart，
point，
i，
事件;
（i = 0; i< Highcharts.charts.length; i = i + 1）{
chart = Highcharts.charts [i];
event = chart.pointer.normalize（e.originalEvent）; //在图表内查找坐标
event.chartX =（event.chartX + 600）％200;
point = chart.series [0] .searchPoint（event，true）; //获取悬停点
if （点）{
point.highlight（e）;
}
}
}）;
I am trying to build a synchronous charts but aligned horizontally, I did it based on
http://www.highcharts.com/demo/synchronized-charts
I made the alignment horizontal, now the charts are not synchronous
/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked
through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/
$(function () {
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container').bind('mousemove touchmove touchstart', function (e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
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.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function (event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
}
}
});
}
}
// Get the data. The contents of the data file can be viewed at
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart" style="width:200px;float:left;">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
title: {
text: dataset.name,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
labels: {
format: '{value} km'
}
},
yAxis: {
title: {
text: null
}
},
tooltip: {
positioner: function () {
return {
x: this.chart.chartWidth - this.label.width, // right aligned
y: -1 // align to title
};
},
borderWidth: 0,
backgroundColor: 'none',
pointFormat: '{point.y}',
headerFormat: '',
shadow: false,
style: {
fontSize: '18px'
},
valueDecimals: dataset.valueDecimals
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
});
});
.chart {
}
</style>
<!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Any help is much appricated,
Thanks in advance.
解决方案
You could edit event.chartX after coordiantes are found in each chart by adding:
event.chartX = (event.chartX+600) % 200;
Adding 600 to avoid negative values and % by 200 because each chart has 200px of width.
Example: http://jsfiddle.net/fzda6z8p/
Relevant part of code:
$('#container').bind('mousemove touchmove touchstart', function (e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
event.chartX = (event.chartX+600) % 200;
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
这篇关于Highcharts水平同步图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
