Highchart на мобильном телефоне (коснитесь, чтобы уменьшить или увеличить масштаб) - LineChart - PullRequest
Новая
       22

Highchart на мобильном телефоне (коснитесь, чтобы уменьшить или увеличить масштаб) - LineChart

0 голосов
/ 19 июня 2019

Я пытаюсь применить ZoomIn и ZoomOut в линейной диаграмме на мобильном устройстве.Цель состоит в том, чтобы щелкнуть зону диаграммы и ZoomIn в первый клик, а ZoomOut - во второй.Последовательность всегда будет такой.

Я уже живу, чтобы увидеть документацию / примеры, и не могу найти ничего, чтобы решить эту ситуацию.

Я уже пробовал использовать эти свойства в chart: свойство 

pinchType : 'y',
zoomType: 'none'

Я пробовал zoomtype, но поведение не то, что я ожидаю.Я хочу щелкнуть мышью, чтобы увеличить эту конкретную область графика.Я не хочу масштабировать двумя пальцами. 

{
    chart: {
        pinchType : 'x'
    },
    legend: {
        itemStyle: {
            color: '#fff'
        }
    },
    plotOptions: {
        series: {
            animation: {
                duration: 2000
            }
        }
    },
    xAxis: {
        tickInterval: 1
    },
    series: [
        {
            type: 'spline',
            color : '#fff'
        },
        {
            dashStyle: 'longdash',
            color: '#b3be77'
        }
    ],
}

Так же просто, как щелкнуть мышью, чтобы получить масштабирование и масштабирование

Ответы [ 5 ]

0 голосов
/ 26 июня 2019

Я пробую приведенный выше пример, но ни одна из них не работает :( Эта функция предназначена для использования на мобильных устройствах. Но в любом случае я тестировал в Интернете этот пример, и он не работал: (

Я использую этот пример:jsfiddle.net/BlackLabel/v6hqzent/1/

Может быть из-за версии highchart. Я использую 4.2.1.

Большое спасибо:)

0 голосов
/ 24 июня 2019

Хорошо.Другая проблема.Теперь мне нравится делать масштабирование только при двойном щелчке на экране.

Я изменяю тип события на dblclick и не работаю: (

  chart: {
events: {
  load: function() {
    this.clickedOnce = false;
  },
  dblclick: function() {
    const chart = this;

    if (chart.clickedOnce) {
        chart.zoomOut();
      chart.clickedOnce = false;
    }
  }
}
  },
   plotOptions: {
    series: {
  events: {
    dblclick: function(e) {
      const chart = this.chart,
        yAxis = chart.yAxis[0],
        xAxis = chart.xAxis[0];

      let x,
        y,
        rangeX,
        rangeY;

      if (!chart.clickedOnce) {
        x = xAxis.toValue(e.chartX);
        y = yAxis.toValue(e.chartY);
        rangeX = xAxis.max - xAxis.min;
        rangeY = yAxis.max - yAxis.min;

        xAxis.setExtremes(x - rangeX / 20, x + rangeX / 20, false);
        yAxis.setExtremes(y - rangeY / 20, y + rangeY / 20, false);
        chart.redraw();

        chart.clickedOnce = true;
      } else {
        chart.zoomOut();
        chart.clickedOnce = false;
      }
    }
  },
    animation: {
            duration: 1000
        }
}
      },
legend: {
    itemStyle: {
        color: '#fff'
    }
},
xAxis: {
    tickInterval: 1
},
series: [
    {
        type: 'spline',
        color : '#fff'
    },
    {
        dashStyle: 'longdash',
        color: '#b3be77'
    }
],

Я вижу этот пример на Fiddle, которыйработать только по двойному клику

DoubleClick

Есть способ вставить Jquery в Json диаграммы.

Большое спасибо

0 голосов
/ 21 июня 2019

Большое спасибо @Wojciech Chmiel

Работайте как заклинание:)

Но теперь ... новый вызов :).

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

Возможно ли добавить это событие к каждому значению в серии?Используя «это».как элемент графика нажал?Я пытаюсь, но не работаю.

С уважением

0 голосов
/ 22 июня 2019

Да, вторую задачу легко решить, добавив эту логику в plotOptions.series.events.click функцию обратного вызова: 

  chart: {
    events: {
      load: function() {
        this.clickedOnce = false;
      },
      click: function() {
        const chart = this;

        if (chart.clickedOnce) {
            chart.zoomOut();
          chart.clickedOnce = false;
        }
      }
    }
  },
  plotOptions: {
    series: {
      events: {
        click: function(e) {
          const chart = this.chart,
            yAxis = chart.yAxis[0],
            xAxis = chart.xAxis[0];

          let x,
            y,
            rangeX,
            rangeY;

          if (!chart.clickedOnce) {
            x = xAxis.toValue(e.chartX);
            y = yAxis.toValue(e.chartY);
            rangeX = xAxis.max - xAxis.min;
            rangeY = yAxis.max - yAxis.min;

            xAxis.setExtremes(x - rangeX / 10, x + rangeX / 10, false);
            yAxis.setExtremes(y - rangeY / 10, y + rangeY / 10, false);
            chart.redraw();

            chart.clickedOnce = true;
          } else {
            chart.zoomOut();
            chart.clickedOnce = false;
          }
        }
      }
    }
  }

Демонстрации:

0 голосов
/ 20 июня 2019

Эта функция по умолчанию не реализована в Highcharts, но вы можете легко добиться этого, добавив свою собственную логику при щелчке по области диаграммы.

При первом щелчке по области используйте метод axis.setExtremes() для увеличения. При втором нажатии используйте chart.zoomOut(), чтобы уменьшить масштаб графика. Проверьте демо и код, размещенный ниже.

Код: 

  chart: {
    events: {
      load: function() {
        this.clickedOnce = false;
      },
      click: function(e) {
        const chart = this,
          yAxis = chart.yAxis[0],
          xAxis = chart.xAxis[0];

        let x,
          y,
          rangeX,
          rangeY;

        if (!chart.clickedOnce) {
          x = xAxis.toValue(e.chartX);
          y = yAxis.toValue(e.chartY);
          rangeX = xAxis.max - xAxis.min;
          rangeY = yAxis.max - yAxis.min;

          xAxis.setExtremes(x - rangeX / 10, x + rangeX / 10, false);
          yAxis.setExtremes(y - rangeY / 10, y + rangeY / 10, false);
          chart.redraw();

          chart.clickedOnce = true;
        } else {
          chart.zoomOut();
          chart.clickedOnce = false;
        }
      }
    }
  }

Демо-версия:

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




Используя плагин customEvents (см .: https://github.com/blacklabel/custom_events) и добавив plotBand на всю область диаграммы, вы можете зарегистрировать обратный вызов для событий щелчка и двойного щелчка. Используя этот подход, вы можете увеличить масштаб события щелчка и уменьшите двойной щелчок (не работает на мобильных устройствах).

Демо:

...