Question

我需要帮助极性图表的y轴，如蜘蛛网或windrose。我有一个带有仪表板的应用程序，其中包含一些小部件，每个小部件都包含一个带有Highcharts图表的iframe。因为这些小部件是可重用的，所以我有一些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像素后，它不包含刻度线，并且在调整为初始大小后，y轴呈现5个刻度。我不明白为什么。在我的例子中，当我将图表从小尺寸调整到更大尺寸时，我只能获得这些效果。

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

谢谢托本

Answer 1

我不确定重绘方法可以实现您的目标，但根据我使用Highcharts的经验，我发现最好指定刻度位置以避免任何意外结果。

以下是有关yAxis: tickPosition

的Highchart文档的链接

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

有一个非常好的jsFiddle示例应该涵盖实现。

Answer 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/

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

2 个答案: