12

私の問題は次のとおりです。phonegap フレームワークを使用してハイブリッド アプリを開発しています。このアプリケーションには、highcharts ライブラリを使用することにしたグラフが必要です。

問題は、チャートに触れた後 (少なくとも画像の選択した部分に触れている間) にスクロールできないように見えることです。

iOS グラフ

私がしたいのは、チャートがイベントを取得しないようにし、何かが強調表示されたプレーンなグラフを表示し、グラフ上でスクロールしてもスクロールできるようにすることです。

コード：

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

3 に答える 3

19

このリンクを試してください....別のjavascriptファイルを作成し、コードをコピーして貼り付け、ファイルを含めてください

于 2012-08-30T11:00:28.960 に答える
1

この問題は、Highchartsがすべてのタッチイベントをキャプチャし、何もしないようにすることで発生します。基本的に、モバイルデバイスのチャート領域にdivをオーバーレイし、それらのイベントがhighcharts要素に到達しないようにすることでこれを解決しました（したがって、デフォルトの動作、つまりページスクロールを自由にトリガーできます）。私はこの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;
}
于 2012-09-27T16:25:21.657 に答える