javascript - 有什么方法可以部分填充 highcharts 气泡图中的气泡？

Question

是否有任何方法可以使用 highcharts 用不同阴影的气泡颜色部分/完全填充单个气泡(取决于气泡中的文本百分比)。我试图通过渲染器选项来实现这一点，但没有获得正确的信息。也欢迎任何引用链接。

问候，

索普

Answer 1

您可以为每个气泡设置特定的颜色，因此您也可以设置渐变。例如 25% 的气泡应该用红色填充，其余的用浅红色填充:http://jsfiddle.net/TL3AV/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'bubble'
    },
    plotOptions: {
        bubble: {
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    },
    series: [{
        data: [{
            x: 29.9,
            y: 71.5,
            z: 106.4
        }, {
            x: 129.2,
            y: 144.0,
            z: 176.0,
            color: {
                linearGradient: {
                    x1: 0,
                    x2: 0,
                    y1: 0,
                    y2: 1
                },
                stops: [ 
                    [0, 'rgb(255,100,100)'],
                    [0.25, 'rgb(255,100,100)'],
                    [0.26, 'rgb(255,200,200)'],
                    [1, 'rgb(255,200,200)']
                ]
            }
        }]
    }]
});

我建议禁用悬停，以防止将颜色更改为默认颜色。