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

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

Answer 2

使用svg元素完成渐变。我不得不把它放在代码的末尾，而我什么都没得到：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SO Q#</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>


<script>

$(function () {
    $('#container').highcharts({

    chart: {
        type: 'bubble',
        zoomType: 'xy'
    },

    title: {
    text: 'Highcharts Bubbles'
    },

    series: [{
        data: [[97,36,99],[94,74,80]],
        color: 'url(#r)'
    }]

    });

});
</script>

</head>
<body>

<div>
    <div id="container" style="width: 800px; height: 400px;"></div>
</div>

<svg>
    <linearGradient id="r" >
    <stop offset="0" stop-color="red"/>
    <stop offset="1" stop-color="green"/>
    </linearGradient>
</svg>

</body>
</html>

有没有办法在highcharts气泡图中部分填充气泡？

2 个答案: