Question

我在highchart插件中有气泡图，这里的要求是每当我单击一个气泡时，气泡都应更改其颜色，这意味着它应该像是活跃的。在我的示例中，它的工作正常，但我无法更改活动/突出显示的颜色变成红色。仅显示黑色边框和灰色。任何人都可以帮我忙。这是下面的代码。

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>

javascript

Highcharts.chart('container', {

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

    title: {
        text: 'Highcharts bubbles with radial gradient fill'
    },

    xAxis: {
        gridLineWidth: 1
    },

    yAxis: {
        startOnTick: false,
        endOnTick: false
    },

    series: [{
        data: [
            [9, 81, 63],
            [98, 5, 89],
            [51, 50, 73],
            [41, 22, 14],
            [58, 24, 20],
            [78, 37, 34],
            [55, 56, 53],
            [18, 45, 70],
            [42, 44, 28],
            [3, 52, 59],
            [31, 18, 97],
            [79, 91, 63],
            [93, 23, 23],
            [44, 83, 22]
        ],
        color: 'green',
       negativeColor: '#ffffff',
        states: {
            select: {
                color: 'red'
            }
        },
        allowPointSelect: true

    }]

});

Answer 1

我猜气泡类型图表没有Log.create(this); Log.handleExceptions(this, true);状态。他们在文档中仅提及select。这些选项也适用于整个系列，而不适用于单个点。

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

因此，您可以通过使用CSS选择器应用所需的样式来达到相同的效果。您可以定位hover类并应用样式。

这是一支电笔看看。 https://codepen.io/samuellawrentz/pen/mjqmVZ

您也可以使用Java脚本执行此操作，必须手动更新所选点的颜色。 CSS看起来非常简单明了

如何使Highchart气泡图颜色变为激活的单击气泡

HTML

javascript

1 个答案: