【问题标题】:Highcharts packed bubble chart not working for negative valuesHighcharts 压缩气泡图不适用于负值
【发布时间】:2019-07-08 10:22:35
【问题描述】:

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

js fiddle link with code example

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
        }]
    }]
});

负值图表

正值图表

【问题讨论】:

    标签: javascript charts highcharts


    【解决方案1】:

    属性zMinzMax 不是官方packedbubble 系列API 的一部分,但它们在内部使用并且在bubble 系列中工作。

    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

    【讨论】:

    • 在这里-21470857.0 的圆比-88.2 小,我们可以换一种方式吗?我需要 -21470857.0 作为大圆圈,--88.2 应该是小圆圈
    • 嗨@heshjse,好的,所以也许将值反转为正数并在工具提示中更改pointFormat?示例:jsfiddle.net/BlackLabel/o8kq43ay
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-04-29
    • 2017-04-30
    • 1970-01-01
    • 1970-01-01
    • 2023-03-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多