如何创建每个图表具有不同序列号的同步高图表

Question

我想创建一个包含两个图表的同步高图表，第一个图表将具有一个系列，第二个图表将具有两个系列。此link包含每个图表都有两个系列的同步图表，但是当我将数据减少到所需条件时，十字准线无法正常工作。图表数据。

var activity = {
    "xData": [1, 1056, 2161, 3215, 4267],

        "datasets": [{
        "name": "Chart 1 series 1",
            "data": [0, 10, 20, 30, 20],
            "unit": "ms",
            "type": "line",
            "valueDecimals": 1
    }, {
        "name": "Chart 1 series 2",
            "data": [23, 84, 22, 5, 75],
            "unit": "ms",
            "type": "line",
            "valueDecimals": 1
    }, {
        "name": "Chart 2 series 1",
            "data": [0, 10, 20, 30, 20],
            "unit": "%",
            "type": "line",
            "valueDecimals": 1
    }]

Answer 1

您将从每个图表上的2个系列转到第一个图表上的2个系列和第二个图表上的1个系列，因此在尝试更新的活动数据时会遇到错误。您需要添加这样的条件检查（大写注释）：

/*
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', function (e) {
        var chart,
        points,
        i;

        for (i = 0; i < Highcharts.charts.length; i++) {
            chart = Highcharts.charts[i];
            e = chart.pointer.normalize(e); // Find coordinates within the chart
            // CHECK IF WE HAVE 2:
            if ( chart.series.length === 2 ){
            points = [chart.series[0].searchPoint(e, true), chart.series[1].searchPoint(e, true)]; // Get the hovered point

            if (points[0] && points[1]) {
                points[0].onMouseOver(); // Show the hover marker
                points[1].onMouseOver(); // Show the hover marker
                chart.tooltip.refresh(points); // Show the tooltip
                chart.xAxis[0].drawCrosshair(e, points[0]); // Show the crosshair
            }
            // CHECK IF WE HAVE 1 CHART:
            } else {
            points = [chart.series[0].searchPoint(e, true)]; // Get the hovered poi
            if (points[0]) {
                points[0].onMouseOver(); // Show the hover marker
                chart.tooltip.refresh(points); // Show the tooltip
                chart.xAxis[0].drawCrosshair(e, points[0]); // Show the crosshair
            }

            }
        }
    });
    /**
    * Override the reset function, we don't need to hide the tooltips and crosshairs.
    */
    Highcharts.Pointer.prototype.reset = function () {};

    /**
    * Synchronize zooming through the setExtremes event handler.
    */
    function syncExtremes(e) {
        var thisChart = this.chart;

        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);
                }
            }
        });
    }

    // Get the data. The contents of the data file can be viewed at 
    // https://github.com/highslide-software/highcharts.com/blob/master/samples/data/activity.json
    //$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) {

var activity = {
    "xData": [1, 1056, 2161, 3215, 4267],

        "datasets": [{
        "name": "Chart 1 series 1",
            "data": [0, 10, 20, 30, 20],
            "unit": "ms",
            "type": "line",
            "valueDecimals": 1
    }, {
        "name": "Chart 1 series 2",
            "data": [23, 84, 22, 5, 75],
            "unit": "ms",
            "type": "line",
            "valueDecimals": 1
    }, {
        "name": "Chart 2 series 1",
            "data": [0, 10, 20, 30, 20],
            "unit": "%",
            "type": "line",
            "valueDecimals": 1
    }]
    },
        lastChart;



    $.each(activity.datasets, function (i, dataset) {

        // Add X values
        dataset.data = Highcharts.map(dataset.data, function (val, i) {
            return [activity.xData[i], val];
        });

        if(i%2 == 0) { //first series of chart

        $('<div class="chart">')
            .appendTo('#container')
            .highcharts({
            chart: {
                marginLeft: 40, // Keep all charts left aligned
                spacingTop: 20,
                spacingBottom: 20,
                // zoomType: 'x'
                // pinchType: null // Disable zoom on touch devices
            },
            title: {
                text: dataset.name.slice(0,7),
                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: {
                shared: true,
                headerFormat: '',
                valueDecimals: dataset.valueDecimals
            },
            series: [{
                data: dataset.data,
                name: dataset.name,
                type: dataset.type,
                color: Highcharts.getOptions().colors[i],
                fillOpacity: 0.3,
                tooltip: {
                    visible:true
                }
            }]
        });

    } else { //second series of chart
        lastChart = Highcharts.charts[Highcharts.charts.length-1];
        lastChart.addSeries({
                data: dataset.data,
                name: dataset.name,
                type: dataset.type,
                color: Highcharts.getOptions().colors[i],
                fillOpacity: 0.3,
                tooltip: {
                    valueSuffix: ' ' + dataset.unit
                }
            });
        }

    });
    //});
});

正在工作的JSFiddle：http://jsfiddle.net/kostasx/kfwtv1zj/