Question

我正在尝试获取用户输入，然后绘制一个包含100个气泡的气泡图。如何将气泡的背景颜色更改为不同的颜色（最多10种颜色）？以下是我的javascript代码，

        <script>
            function generateChart() {
                var my_arr = [];
                var Stakeholders = [];
          
                $('td').each(function () {
                    my_arr.push($(this).children().val());
                });

                var length = my_arr.length;

                for (var i = 0; i < length - 2; i++) {
                    var Stakeholder = new Object();
                    Stakeholder.name = my_arr[i] || 'Unknown';
                    Stakeholder.x = parseFloat(my_arr[i + 1] || 5);
                    Stakeholder.y = parseFloat(my_arr[i + 2] || 5);
                    Stakeholders.push(Stakeholder);
                    i += 2;
                }
                drawChart(Stakeholders);
            };

            function drawChart(Stakeholders) {
                Highcharts.chart('container', {
                    chart: {
                        type: 'bubble',
                        plotBorderWidth: 1,
                        zoomType: 'xy',
                        spacingTop: 40,
                        spacingRight: 40,
                        spacingBottom: 40,
                        spacingLeft: 40,
                        borderWidth: 1
                    },
                    plotOptions: {
                        column: {
                            colorByPoint: true
                        }
                    },

                    series: [{
                        data: Stakeholders
                    }]

                });
            };
        </script>

Answer 1

我应该向利益相关者添加一个属性：

var colors = ['#98d9c2', '#ffd9ce', '#db5461', '#f5853f', '#b497d6', '#dc965a', '#FF9655', '#FFF263', '#6AF9C4', "000"];
for (var i = 0; i < length - 2 ; i++) {
            var Stakeholder = new Object();
            var color = parseInt(Math.random() * 10);
            Stakeholder.name = my_arr[i] || 'Unknown';
            Stakeholder.x = parseFloat(my_arr[i + 1]);
            Stakeholder.y = parseFloat(my_arr[i + 2]);
            Stakeholder.z = 5;
            Stakeholder.color =  colors[color];
            Stakeholders.push(Stakeholder);
            i += 2;
}

Answer 2

我不确定您是要为特定气泡指定特定颜色还是只是随机指定颜色，但您可以为系列中的每个气泡对象添加color: 'somecolor'属性。

Fiddle here（见第96-110行）。

或者，您可以创建一个颜色数组，循环您的气泡系列，并为每个气泡对象随机分配颜色。

希望这有帮助。

如何更改highcharts中每个气泡的背景颜色？

2 个答案: