时间戳

首页 > 解决方案 > Highcharts 压缩气泡图不适用于负值

javascript - Highcharts 压缩气泡图不适用于负值

问题描述

我正在使用高图表包装气泡图，我需要根据其值（负值）显示不同大小的气泡。当我传递正值时它工作正常，但当我传递负值时圆的大小不会改变。有什么方法可以显示带有负值的图表吗？

js小提琴链接与代码示例

Highcharts.chart('container', {
    chart: {
        type: 'packedbubble',
        height: '100%'
    },
    title: {
        text: 'TOP Countries'
    },
    tooltip: {
        useHTML: true,
        pointFormat: '<b>{point.name}:</b> {point.value}'
    },
    plotOptions: {
        packedbubble: {
            minSize: '30%',
            maxSize: '80%',
            zMin: 0,
            zMax: 1000,
            layoutAlgorithm: {
                splitSeries: false,
                gravitationalConstant: 0.02
            },
            dataLabels: {
                enabled: true,
                format: '{series.name}',
                filter: {
                    property: 'y',
                    operator: '>',
                    value: 250
                },
                style: {
                    color: 'black',
                    textOutline: 'none',
                    fontWeight: 'normal'
                }
            }
        }
    },
    series: [{
        name: 'ASEAN',
        data: [{
            name: "ASEAN",
            value: -88.2
        }]
    }, {
        name: 'KOR ',
        data: [{
            name: "KOR",
            value: -605.2
        }]
    }, {
        name: 'CHN ',
        data: [{
            name: "CHN",
            value: -427233.7
        }]
    }, {
        name: 'ISA ',
        data: [{
            name: "ISA",
            value: -355.39
        }]
    }, {
        name: 'ANZ ',
        data: [{
            name: "ANZ ",
            value: -3331.4
        }]
    }, {
        name: 'JP ',
        data: [{
            name: "JP1",
            value: -22470857.0
        },{
            name: "JP2",
            value: -21470857.0
        }]
    }]
});

带有负值的图形

带有负值的图形

具有正值的图形 具有正值的图形

标签： javascriptchartshighcharts

解决方案

属性不是官方系列 API 的一部分zMin，但它们在内部使用并按系列工作。zMaxpackedbubblebubble

plotOptions: {
    packedbubble: {
        minSize: '30%',
        maxSize: '80%',
        //zMin: 0,
        //zMax: 1000,
        ...
    }
}

现场演示： https ://jsfiddle.net/BlackLabel/vro2wzL4/

API参考：

https://api.highcharts.com/highcharts/series.packedbubble

https://api.highcharts.com/highcharts/series.bubble.zMin

推荐阅读