javascript - 如何在同步图表 highchart 中只显示一个 x 轴

Question

        $('#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 () {
    return undefined;
    };

    Highcharts.Point.prototype.highlight = function (event) {
    event = this.series.chart.pointer.normalize(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
    };


    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
    $.getJSON(

  'https://cdn.rawgit.com/highcharts/highcharts/v6.0.4/samples/data/activity.json',
    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">')
                .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 {
                                // right aligned
                                x: this.chart.chartWidth - this.label.width,
                                y: 10 // 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
                        }
                    }]
                });
        });
    }
    );

任何帮助将不胜感激

Answer 1

您可以使用 visible 属性隐藏不需要的 x 轴:

      xAxis: {
        visible: i === 2,
        (...)
      },

现场演示: http://jsfiddle.net/BlackLabel/abf07jgc/

API 引用: https://api.highcharts.com/highcharts/xAxis.visible