Question

问题：在我的移动设备上，如果我向左或向右拖动图表，则底部的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,29103210],[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>

Answer 1

已知错误，已向我们的开发人员报告：https://github.com/highslide-software/highcharts.com/issues/1701

Answer 2

不是一个非常优雅的解决方案，也不是真正了解一切。但看起来转换是通过绘图偏移来完成的。如果你有2个系列，那么偏移可能会有所不同。我在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

Highstock：移动设备上的问题，拖动后具有双Y轴的图表会将底部Y轴移动到图表的顶部

2 个答案: