极坐标图中 y 轴的错误渲染答案

【问题标题】：Wrong rendering of y-axis in polar charts极坐标图中 y 轴的错误渲染
【发布时间】：2013-07-29 17:25:26
【问题描述】：

我需要有关蜘蛛网或风玫瑰图等极坐标图 y 轴的帮助。我有一个带有仪表板的应用程序，其中包含一些小部件，每个小部件都包含一个带有 Highcharts 图表的 iframe。因为这些小部件是 reziable，所以我有一些用于调整图表容器大小的 javascript。

    $(window).bind("resize", resizeChart);
    function resizeChart() {
        var width = $(document).width() - 55;
        var height = $(document).height() - 60;
        $("#container").css("width", width);
        $("#container").css("height", height);
    }

一些例子：http://jsfiddle.net/CwnDw/

我的问题是，y 轴的刻度通常看起来很丑。当图表加载时，y 轴只有一个刻度。将图表大小调整为 + 10 px 后，它不包含刻度，调整到初始大小后，y 轴呈现 5 个刻度。我不明白为什么。在我的示例中，只有当我非常快速地将图表从小尺寸调整到大尺寸时，我才会得到这些效果。

有没有更好的方法来调整图表的大小？我尝试了 chart.setSize() 函数，但没有效果。或者：有没有办法重新渲染/重新计算 y 轴？

谢谢托本

【问题讨论】：

标签： highcharts

【解决方案1】：

我不确定是否有一种重绘方法可以满足您的要求，但根据我使用 Highcharts 的经验，我发现最好指定刻度位置以避免任何意外结果。

这里是关于 yAxis: tickPosition 的 Highchart 文档的链接

http://api.highcharts.com/highcharts#yAxis.tickPositions

那里有一个很好的 jsFiddle 示例，应该涵盖实现。

【讨论】：

【解决方案2】：

试试这个：

function resizeChart() {
    var width = $(document).width() - 55;
    var height = $(document).height() - 60;
    $("#container").css("width", width);
    $("#container").css("height", height);
    setTimeout(function () {
         chart1.setSize(
            width,
            height,
            false
        );
    },10);
}

http://jsfiddle.net/9YFB8/2/

【讨论】：

这没有任何作用。我猜周围的 iFrame 有问题。我尝试编辑我的 jsFiddle 示例