Question

我尝试获取多个高度不同的高图的十字准线。

要知道，十字准线是在光标位置而不是在点/ xAxis值（这是首选）上同步。谁能给我提示如何实现这一目标？

我在以下小提琴中更改了同步图表示例：

图表创建：

$.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">')
            .appendTo('#container')
            .highcharts({
                chart: {
                    marginLeft: 40+i*100, // make different width for each chart
                    spacingTop: 20,
                    spacingBottom: 20
                },

同步代码

$('#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];
        // Find coordinates within the chart
        event = chart.pointer.normalize(e.originalEvent);
        // Get the hovered point
        point = chart.series[0].searchPoint(event, true);

        if (point) {
            point.highlight(e);
        }
    }
});

谢谢

Answer 1

在这里您可以找到一个示例，该示例如何基于xAxis值同步多个图表：http://jsfiddle.net/BlackLabel/udtkgs9m/

在多个图表上同步打印线的代码：

function syncronizeCrossHairs(chart) {
    var container = jQuery(chart.container),
        offset = container.offset(),
        x, y;

    container.mousemove(function(evt) {
        x = evt.clientX - chart.plotLeft - offset.left;
        y = evt.clientY - chart.plotTop - offset.top;

        var val = chart.xAxis[0].translate(x, true);

        Highcharts.each(Highcharts.charts, function (act_chart) {
            var xAxis = act_chart.xAxis[0];
            xAxis.removePlotLine("myPlotLineId");
            xAxis.addPlotLine({
                value: val,
                width: 1,
                color: 'red',
                //dashStyle: 'dash',                   
                id: "myPlotLineId"
            });
        });
   });
}

Highcharts-同步具有不同宽度的图表的十字准线

1 个答案: