高图-动态设置列宽 [英] Highcharts - set column width dynamically

问题描述

我想创建一个柱形图，其中第一列的宽度为第二列的50％. 我的想法是读取 load -event上第二列的宽度，计算宽度并将其设置为第一列；对于重新绘制-事件.

I want to create a column chart where the first column has 50% of the width of the second column. My idea was to read the width of the second column on the load-event, calculate the width and set it to the first column; the same for the redraw-event.

此功能在首次加载图表后有效，但是当我想在重绘事件中更改列宽时，我陷入了困境:调整窗口大小时，我得到了下一个到最后"，而不是当前.

This works after when the chart is loaded for the first time, but I'm stuck when I want to change the column width in the redraw event: when resizing the window, I get the calculated column width of the "next to last" resize, and not the current one.

此小提琴显示了问题: http://jsfiddle.net/u8a0oo0d/

This fiddle shows the problem: http://jsfiddle.net/u8a0oo0d/

$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        chart: {
            events: {
                load: function () {
                    this.series[0].options.pointWidth = this.series[0].barW / 2;
                    this.series[0].update(this.series[0].options);
                },
                redraw: function(event) {
                    console.log('redraw', this.series[0]);
                    this.series[0].options.pointWidth = this.series[1].barW / 2;
                    this.series[0].isDirty = true;
                    //this.series[0].update(this.series[0].options);
                }
            }
        },
        series: [{
            type: 'column',
            //pointWidth: 10,
            data: [29.9, 71.5, 126.4, 149.2, 114.0, 126.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        },{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            type: 'column'
        }]
    });
});

推荐答案

您的函数在 redraw 事件被触发后被称为 next to last宽度.这是 DEMO 用于显示函数调用的时间.

Your function is called after the redraw event is fired, so that's why you are getting the next to last width. Here's the DEMO for showing the timing of the function call.

您可以做的是在该函数中再次调用重绘，只是该特定的系列不调用同一处理程序并导致循环.这是您可以做的:

The thing you can do is call the redraw again in that function except for just that particular serie, which doesn't call the same handler and cause a loop. Here's what you can do:

redraw: function(event) {
            this.series[0].options.pointWidth = this.series[1].barW / 2;
            this.series[0].redraw();
        }

这是工作中的 小提琴 .

And here's the working fiddle.

这篇关于高图-动态设置列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！