Highcharts 带高度图的金字塔图

Highcharts 带高度图的金字塔图,highcharts,Highcharts,我们已经成功地得到了一个类似贝娄的金字塔形图,但是随着百分比数据的变化,金字塔的形状将变得扭曲。我需要保持金字塔形状,即使百分比数据是变化的。提前谢谢 代码: 你能展示那个扭曲的金字塔吗?@PawełFus:请检查一下,我想你需要用这种方式重新计算点的x位置,看看:@PawełFus感谢你的时间和努力。数据可以在任何方向上变化,因为在中,是否有一种方法可以概括此解决方案以保持金字塔形状完好我的示例只是说明如何更改点的x值,这不是所有情况下的解决方案:)您需要编写自己的函数来计算x值并显示正确的

我们已经成功地得到了一个类似贝娄的金字塔形图,但是随着百分比数据的变化,金字塔的形状将变得扭曲。我需要保持金字塔形状,即使百分比数据是变化的。提前谢谢

代码:


你能展示那个扭曲的金字塔吗?@PawełFus:请检查一下,我想你需要用这种方式重新计算点的x位置,看看:@PawełFus感谢你的时间和努力。数据可以在任何方向上变化,因为在中,是否有一种方法可以概括此解决方案以保持金字塔形状完好我的示例只是说明如何更改点的x值,这不是所有情况下的解决方案:)您需要编写自己的函数来计算x值并显示正确的金字塔。
$('#container').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: 'Pyramid Chart'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: ['1', '2', '3', '4','5','6','7','8','9','10','11'],
            tickmarkPlacement: 'off',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: 'Percentage'
            },
            labels: {
                formatter: function() {
                    return this.value;
                }
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            area: {
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    enabled: false
                }
            }
        },
        series: [{
            name: 'A',
            zInxed:555555,
            data: [null,null,null,null,80,100,80,null,null,null,null]
            },
            {
            name: 'B',
            zInxed:666666,
            data: [null,null,null,60,80,80,80,60,null,null,null]
            },
            {
            name: 'C',
            zInxed:777777,
            data: [null,null,40,60,60,60,60,60,40,null,null]
            },
            {
            name: 'D',
            zInxed:888888,
            data: [null,20,40,40,40,40,40,40,40,20,null]
            },
            {
            name: 'E',
            zInxed:999999,
            data: [0,20,20,20,20,20,20,20,20,20,0]
        }]
    });