Можно ли синхронизировать c масштабирование между двумя разбросанными старшими диаграммами?

Question

Я хочу достичь двух вещей.

1 - На рисунке выше представьте, что верхняя часть не существует для начала. Если бы пользователь щелкнул любую точку на нижней диаграмме, я бы хотел, чтобы верхняя диаграмма создавалась в увеличенном виде. И если нижняя часть нажата и перетащена, верхняя часть должна следовать за этим.

2 - Если нижний график был увеличен, я хочу, чтобы верхний график также был увеличен. Пример: Если нижний был 1x, а верхний был 2x, если я увеличивал нижний на 2x, верхний теперь должен быть 4x .

Возможно ли это с высокими чартами?

Answer 1

Да, такое поведение легко достижимо в Highcharts. Все, что вам нужно сделать, это использовать функцию обратного вызова событий Axis.afterSetExtremes и Point.click, чтобы создать или обновить другую диаграмму с соответствующими крайними значениями оси. Например:

var chart1,
  scale = 4;

function createOrUpdateDetail() {
  var isPointClick = !this.lin2log,
    chart = this.chart || this.series.chart,
    xMin = chart.xAxis[0].min,
    xMax = chart.xAxis[0].max,
    xRange = xMax - xMin,
    xCenter = (xMax + xMin) / 2,
    yMin = chart.yAxis[0].min,
    yMax = chart.yAxis[0].max,
    yRange = yMax - yMin,
    yCenter = (yMax + yMin) / 2,
    calcXMin,
    calcXMax,
    calcYMin,
    calcYMax;

  if (isPointClick) {
    xCenter = this.x;
    yCenter = this.y;
  }

  calcXMin = xCenter - xRange / scale;
  calcXMax = xCenter + xRange / scale;
  calcYMin = yCenter - yRange / scale;
  calcYMax = yCenter + yRange / scale;

  if (!chart1) {
    chart1 = Highcharts.chart('container', {
      series: [{
        type: 'scatter',
        data: this.series.options.data
      }],
      xAxis: {
        min: calcXMin,
        max: calcXMax,
      },
      yAxis: {
        endOnTick: false,
        startOnTick: false,
        min: calcYMin,
        max: calcYMax
      }
    });

  } else {
    chart1.update({
      xAxis: {
        min: calcXMin,
        max: calcXMax,
      },
      yAxis: {
        min: calcYMin,
        max: calcYMax
      }
    });
  }
}

Highcharts.chart('container2', {
  chart: {
    zoomType: 'xy',
    panning: true,
    panKey: 'shift'
  },
  yAxis: {
    endOnTick: false,
    startOnTick: false,
  },
  xAxis: {
    events: {
      afterSetExtremes: createOrUpdateDetail
    }
  },
  series: [{
    type: 'scatter',
    data: [...],
    point: {
      events: {
        click: createOrUpdateDetail
      }
    }
  }]
});

---

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4982/

Справочник по API:

https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes

https://api.highcharts.com/highcharts/series.scatter.events.click

https://api.highcharts.com/class-reference/Highcharts.Chart#update