[英]Highcharts Sync charts horizontally
我正在嘗試構建同步圖表但水平對齊,我是基於它做的
http://www.highcharts.com/demo/synchronized-charts
我使對齊水平,現在圖表不同步
/* 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>
任何幫助都很多,
提前致謝。
您可以編輯event.chartX
coordiantes是每個排行榜中加入后發現:
event.chartX = (event.chartX+600) % 200;
添加600
以避免負值,將%
200px
200
因為每個圖表的寬度為200px
。 示例: http : //jsfiddle.net/fzda6z8p/
代碼的相關部分:
$('#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);
}
}
});
我在每對圖表中都有多個系列。 當任何系列數據中存在空值時,同步失敗。
這是一個修改后的searchPoint函數,用於在X軸上找到與要懸停的點對應的高亮顯示的確切類別。 因此即使系列中有空白值,十字准線也會平滑移動。
function searchPoint(event, chart) {
var points = chart.series[0].points,
len = points.length,
x = chart.axes[0].toValue(event.chartX),
range = 0.2,
pointX,
i;
for (i=0; i<len; i++) {
pointX = points[i].x;
if (x - range < pointX && pointX < x + range) {
return points[i];
}
}
}
論壇討論: https : //www.highcharts.com/forum/viewtopic.php?t = 35903
JSFiddle: https ://jsfiddle.net/jj6a9jot/5/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.