Highstock：在移动设备上的问题，与双Y轴的拖累后，将底部的Y轴移动到图表

图表顶部的图表：如果我拖上我的移动设备：http://jsfiddle.net/KU9uY/Highstock：在移动设备上的问题，与双Y轴的拖累后，将底部的Y轴移动到图表

问题底部的Y轴向左或向右移动到顶部。

截图：http://i.imgur.com/T1SvO9e.png

设备：Android平板4.1（以及模拟器），iPhone 5

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title> 
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script src="http://code.highcharts.com/stock/highstock.js"></script> 
<style type="text/css"> body{ height:100% } div.fullscreen{ display:block; position:absolute; top:0; left:0; width:100%; height:100%; }</style> 
<script type='text/javascript'> 
//<![CDATA[ 
$(document).ready(function() { 
    var dataArray = [[1362960000000,102.369297],[1363046400000,102.516221],[1363132800000,102.534587],[1363219200000,103.339855],[1363305600000,102.975359],[1363564800000,103.21692],[1363651200000,103.502322],[1363737600000,104.003827],[1363824000000,103.245219],[1363910400000,103.759425],[1364169600000,103.43168],[1364256000000,103.418946],[1364342400000,104.200173],[1364428800000,105.066165],[1364774400000,105.08453],[1364860800000,105.78528],[1364947200000,104.90088],[1365033600000,105.029435],[1365120000000,105.41797],[1365379200000,105.013929],[1365465600000,108.751608],[1365552000000,111.21087]]; 
    var volumeArray = [[1362960000000,36635430],[1363046400000,39259460],[1363132800000,],[1363219200000,55917300],[1363305600000,92711920],[1363564800000,44828020],[1363651200000,51902970],[1363737600000,35454210],[1363824000000,34234570],[1363910400000,28720830],[1364169600000,44153930],[1364256000000,27831650],[1364342400000,36048960],[1364428800000,55455610],[1364774400000,29203120],[1364860800000,28460380],[1364947200000,35064470],[1365033600000,45267600],[1365120000000,50928780],[1365379200000,34759720],[1365465600000,77737850],[1365552000000,71116620]]; 

    var chartHeight = $('#chartContainer').height(); 
    var onePercent = chartHeight/100; 

    window.chart = new Highcharts.StockChart({ 
    chart : { 
     backgroundColor: 'lightgrey', 
     plotBackgroundColor: 'white', 
     zoomType : 'x', 
     renderTo : 'chartContainer', 
     //borderRadius : 0, spacingTop : 0, spacingLeft : 0, spacingRight : 0, spacingBottom: 0, marginTop : 0, marginLeft : 0, marginRight : 0, marginBottom: 0 
     },  
     rangeSelector : {selected : 0, enabled : false }, 
     scrollbar: {enabled: false }, 
     navigator: {enabled: false }, 
     yAxis: [ 
      { title: { text: 'Price (USD)' }, maxPadding: 0.1, height: onePercent * 50, lineWidth: 1, opposite: true }, 
      { title: { text: 'Volume' }, height: onePercent * 10, offset: 0, top: onePercent * 80, lineWidth: 1, opposite: true } 
     ], 
     xAxis : [ 
      { type: 'datetime', 
       //lineColor: 'black', lineWidth: 1, 
       ordinal: false, 
       tickPosition: 'outside', 
       gridLineWidth: 1, 
       gridZIndex: 1,   
       dateTimeLabelFormats: { 
        second: '%Y-%m-%d<br/>%H:%M:%S', 
        minute: '%Y-%m-%d<br/>%H:%M', 
        hour: '%Y-%m-%d<br/>%H:%M', 
        day: '%Y<br/>%m-%d', 
        week: '%Y<br/>%m-%d', 
        month: '%Y-%m', 
        year: '%Y' 
       }} 
     ], 
     series : [ 
      { data : dataArray, name : 'Microsoft Corporation (NasdaqGS:MSFT)', lineColor: 'blue', tooltip: { valueDecimals: 2 }, yAxis: 0, type : 'area', fillColor : { linearGradient : { x1: 0, y1: 0, x2: 0, y2: 1 }, stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]}}, 
      { data : volumeArray, name : 'Volume', type : 'area', yAxis: 1, fillColor : { linearGradient : { x1: 0, y1: 0, x2: 0, y2: 1 }, stops : [[0, Highcharts.getOptions().colors[1]], [1, 'rgba(0,0,0,0)']]}} 
     ]}); 

text = chart.renderer.text("My Text").add(); 
textBBox = text.getBBox(); 
x = chart.plotLeft + (chart.plotWidth * 0.5) - (textBBox.width * 0.5); 
y = chart.plotTop + (chart.plotHeight * 0.5) - (textBBox.height * 0.5); 
text.attr({x: x, y: y});   
    }); 
//]]> 
</script></head><body><div id="chartContainer" class="fullscreen"></div></body></html>

来源

2013-05-02 thebitllc

已知的bug报告给开发者在这里：https://github.com/highslide-software/highcharts.com/issues/1701

来源

2013-05-08 14:10:14

不是很优雅解决方案，也不是真的了解一切。但看起来转换是通过绘图偏移完成的。如果您有两个系列，偏移可能会不同。我的解决方案为highstock.js

/** 
* Scale series groups to a certain scale and translation 
*/ 
scaleGroups: function (attribs, clip) { 
    var chart = this.chart; 

    // Scale each series 
    each(chart.series, function (series) { 
     // fix the offset if it's different from plots 
     // solutions for the issue 1701  
     if (series.yAxis.lineTop != attribs.translateY) { 
      attribs.translateY = series.yAxis.lineTop; 
     } 
     // end of the fix

来源

2013-05-29 17:19:56 thebitllc

Highstock：在移动设备上的问题，与双Y轴的拖累后，将底部的Y轴移动到图表

回答

相关问题