Подтвердить что ты не робот

Прокрутка по графику диаграмм

Здесь моя проблема: Я использую схему phonegap для разработки гибридного приложения, и мне нужно, чтобы это приложение имело графики, для которых я решил использовать библиотеку highcharts.

Проблема заключается в том, что я не могу прокручиваться после касания графика (по крайней мере, касаясь внутри выбранной части изображения).

ios graph

То, что я хочу сделать, не позволяет диаграмме принимать какие-либо события и показывать простой граф с чем-либо выделенным и иметь возможность прокручивать, даже если im делает это над графиком.

код:

chart1 = new Highcharts.Chart({
  chart: {
    renderTo: 'containerBar',
    animation: false,
    type: 'bar',
    events: {
      click: function(event){
        return false;
      }
    }
  },
  scrollbar: {
    enabled: true
  },
  title: {
    text: 'Fruit Consumption'
  },
  plotOptions: {
    bar: {
      events: {
        click: function(event){
          return false;
        },
        mouseOver: function(event){
          return false;           
        },
        legendItemClick: function () {
          return false;
        }
      },
      states: {
        hover: function(){
          alert("Allow");
        }
      }
    }
  },
  events: {
    click: function(e) {
      alert("Click");
    }  
  },
  xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
  },
  yAxis: {
    title: {
      text: 'Fruit eaten'
    }
  },
  tooltip: {
    enabled: false
  },
  series: [{
    name: 'Jane',
    data: [1, 3, 4]
  }, {
    name: 'John',
    data: [5, 7, 3]
  }]
});
4b9b3361

Ответ 1

Чтобы следить за тем, чтобы люди читали этот вопрос и его ответы, проблема с визуализацией прокрутки и Highcharts была решена с помощью версии 3.0.1 (2013-04-09). Highstock, один из братьев из Highcharts, получил аналогичное обновление с версией 1.3.1 (2013-04-09).

Добавлена ​​новая опция, tooltip.followTouchMove. Когда это верно, всплывающую подсказку можно перемещать, перетаскивая один палец по диаграмме, как в Highcharts 2. Когда это неверно, перетаскивание одного пальца игнорируется диаграммой и вызывает прокрутку всей страницы. Эта применяется только тогда, когда масштабирование не включено.

Дальнейшие улучшения были сделаны в Highcharts версии 4.1.0 (2015-02-16):

Сделано tooltip.followTouchMove true по умолчанию и разрешено прокрутка страницы в то же время.

Для полного журнала изменений Highcharts см. http://www.highcharts.com/documentation/changelog.

Ответ 2

Попробуйте эту ссылку . Просто создайте отдельный файл javascript, скопируйте код и включите файл

Ответ 3

Проблема вызвана тем, что Highcharts захватывает все события касания и заставляет их ничего не делать. Я решил это, просто наложив div на область диаграммы на мобильные устройства и не допустить, чтобы эти события достигли элементов высоких диаграмм (поэтому они могут запускать поведение по умолчанию, то есть прокрутку страницы). Я использовал этот JS (предполагая, что вы также используете JQuery или эквивалент):

$('.highcharts-container').each(function() {
  var dragHandle;
  dragHandle = $('<div class="chart-drag-handle">');
  $(this).append(dragHandle);
  dragHandle.on('touchstart', function(e) {
    e.stopPropagation();
  });
  dragHandle.on('touchmove', function(e) {
    e.stopPropagation();
  });
  dragHandle.on('touchend', function(e) {
    e.stopPropagation();
  });
  dragHandle.on('touchcancel', function(e) {
    e.stopPropagation();
  });
});

Добавленные элементы должны быть стилизованы для наложения диаграммы, я сделал это так:

.highcharts-container .chart-drag-handle {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 100;
}