Highcharts 4.0 iPhone /觸摸屏滾動

我最近推出的我的個人網站，grantmcgovern.comHighcharts 4.0 iPhone /觸摸屏滾動

它看起來在瀏覽器好，是建來響應移動顯示器，但是，Highcharts是談到了成爲一個問題移動觀衆。

我讀過有關這種情況發生在過去，而解決方案是包含this script

我試過，但無濟於事。我也嘗試禁用鼠標跟蹤等，但仍然沒有雪茄。

這是我如何構建與jQuery圖表：

$('#log').highcharts({ 
    chart: { 
     renderTo: 'container', 
     plotBackgroundColor: null, 
     plotShadow: false, 
     backgroundColor:'rgba(255, 255, 255, 0)' 
    }, 
    title: { 
     text: "" // Imported from config.js 
    }, 
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: true, 
       format: '<b>{point.name}</b>: {point.percentage:.2f} %', 
       style: { 
        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'white' 
       } 
      } 
     } 
    }, 
    series: [{ 
     type: 'pie', 
     name: 'Code Construct', 
     data: dataArrayFinal 
    }] 
});

，這裏是我的HTML塊，它正在建設中的餅圖：

<div class="container-fluid" id="mainContainer"> 
    <div class="aboutMe"> 
     <div id="nameTitle" class="animated tada" id="name"> 
      <h1 id="titleName">Grant McGovern.</h1> 
     </div> 
     <div class="subTitle"> 
      <p>Coder.&emsp;&emsp;&emsp;Builder.&emsp;&emsp;&emsp;Learner.</p> 
     </div> 
     <hr> 
     <div id="log" style="height:100%"></div> 
     <div class="graphSubText"> 
      <a id="graphSubtext" href="https://github.com/g12mcgov/DevCharts">What is this? Checkout my project, DevCharts!</a> 
     </div>s 
     <hr> 
    </div> 
</div>

，這裏是我的CSS建立觸摸屏滾動（其在Highchart不存在時起作用）：

html, body { 
width: 100%; 
margin: 0px; 
padding: 0px; 
overflow: hidden; 
overflow-y: scroll; 
-webkit-overflow-scrolling: touch; 
}

I'米感到困惑，爲什麼我的網站仍拒絕與Highcharts滾動。您可以通過在iPhone /移動設備上登錄grantmcgovern.com來查看。我認識到高圖不能正確縮放......這是此後的下一個修復。

來源

2014-09-30 user3330599

你試過從你的頁面移除圖表嗎？在Chrome設備模式和移動仿真我試圖從控制檯中刪除包含圖表的div，我仍然無法滾動您的網站。在頁面完全加載前的android設備中，我可以滾動，但後來它是不可能的。 – 2014-09-30 15:46:50

@KacperMadej我發現了這個bug。我正在使用Skrollr庫，事實證明，您需要將標記添加到名爲「skrollr-body」的html元素以允許移動支持。 – user3330599 2014-09-30 16:17:10

我發現了這個錯誤。我正在使用Skrollr庫，事實證明，您需要將標記添加到名爲「skrollr-body」的html元素以允許移動支持。

看到這個post

來源

2014-09-30 16:17:52 user3330599

Highcharts 4.0 iPhone /觸摸屏滾動

回答

相關問題