Question

我在highchart插件中有气泡图，在这里我的要求是任何人都应根据点击值选择气泡。如果我单击10个不同的选择，然后单击20个不同的选择，任何人都可以帮助我。这是下面的代码。

html

 <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
<p class="num">10</p>
<p class="num">20</p>

javascript

$("p.num").show();
 $("p.num").click(function(){ 
Highcharts.chart('container', {
    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy',
         events:{
         load:function(){
      var points = this.series[0].points;
      points[6].select();
    }
        }
    },

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

    xAxis: {
        gridLineWidth: 1
    },

    yAxis: {
        startOnTick: false,
        endOnTick: false
    },
 plotOptions: {
        series: {
            allowPointSelect: true,
            marker: {
                states: {
                    select: {
                        fillColor : 'orange'

                    }
                }
            }
        }
    },
    series: [{
        data: [
            [9, 81, 103],
            [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',
    }]

})
});

style.css

.highcharts-point-select{
stroke: orange;
}

Answer 1

当然可以。我已经更新了代码笔：https://codepen.io/samuellawrentz/pen/mjqmVZ

您只需要从序列数据中选择一个点，然后在图表加载期间对其触发select事件。必须指定在加载过程中选择要选择的点的条件。

目前，我已经硬编码了页面加载期间要选择的第六点。查看codepen了解详细信息。

编辑：

根据您的要求，我更新了代码笔，看看。点击期间要选择的值在HTML中以value属性的形式给出。然后在点击事件期间，我们正在读取该属性并选择value属性中提到的点。

<p class="num" value=5>10</p>

当您单击10时，5th属性的值为5，因此将在此处选择value点。

参考：https://api.highcharts.com/class-reference/Highcharts.Point#select

如何在highchart中制作气泡图，选择加载时的气泡

html

javascript

style.css

1 个答案: