Вопрос:

Highcharts Синхронизировать графики по горизонтали

javascript charts highcharts

1163 просмотра

2 ответа

5965 Репутация автора

Я пытаюсь построить синхронные графики, но выровняли по горизонтали, я сделал это на основе

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>

Любая помощь очень ценится,

Заранее спасибо.

Автор: Dilip Rajkumar Источник Размещён: 01.06.2016 07:24

Ответы (2)


7 плюса

6999 Репутация автора

Решение

Вы можете редактировать event.chartXпосле нахождения координат на каждом графике, добавив:

event.chartX = (event.chartX+600) % 200;

Добавление , 600чтобы избежать отрицательных значений и с %помощью , 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);
        }
    }
});
Автор: Kacper Madej Размещён: 01.06.2016 10:10

0 плюса

61 Репутация автора

У меня есть несколько серий в каждой паре графиков. Синхронизация завершается неудачно, если в любых данных серии есть пустые значения.

Это модифицированная функция 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/

Автор: abhikarma1493 Размещён: 12.06.2019 09:17
Вопросы из категории :
32x32