Question

嗨，我的jquery手机+ phonegap应用程序我使用蜘蛛图表来显示我的销售，但我发现很难让它适合我的手机屏幕。尝试如下

 <table >
    <tr id="chartRow">
        <td style="width:50%;">
            <div id="container"></div>
        </td>
        <td style="width:50%;">

        </td>
    </tr>
</table>

的javascript：

<script type="text/javascript">
$(function () {

    $('#container').highcharts({

        chart: {
            reflow: false,
            polar: true,
             renderTo: 'container',

            type: 'line'
        },

        title: {
            text: '',
            x: -80
        },

        pane: {
            size: '50%'
        },

        xAxis: {
            categories: ['Aligt', 'Reach', 'ment', 'Acqa', 
                    'Adv', 'Gover'],
            tickmarkPlacement: 'on',
            lineWidth: 0
        },

        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0
        },

        tooltip: {
            shared: true,
            pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
        },

        legend: {
             layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
        },

        series: [{
            name: 'Max Score',
            data: [25,25,25,25,25,25],
            pointPlacement: 'on'
        }, {
            name: 'Organization Score',
            data: [30,20,15,25,10,0],
            pointPlacement: 'on'
        }]

    });

    $(window).resize(function() {
    height = chart.height
    width = $("#chartRow").width() / 2
    chart.setSize(width, height, doAnimation = true);
});


});

</script>

尝试调整窗口的大小，但它没有工作..有人请让我知道如何实现这一目标。

Answer 1

从该代码中获得jsFiddle。您在设置高度/宽度时出现语法错误：

$(window).resize(function() {
    height = chart.height
    width = $("#chartRow").width() / 2
    chart.setSize(width, height, doAnimation = true);
});

;和height设置后，您需要width。

更重要的是 - 你永远不会告诉它chart是什么。为此，您需要设置var：

var chart = $("#container").highcharts();

现在它确实重新调整大小但不知道预期结果我无法确定它是否正确重新调整大小。

Highcharts无法适应移动屏幕尺寸

1 个答案: