如何在highchart中制作气泡图，选择加载时的气泡 [英] how to make bubble chart in highchart selected a bubble on load

问题描述

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

I have bubble chart in highchart plugin,Here my requirement is anyone bubble should be selected based on clicked value.for ex. if I click 10 different selection and if click on 20 different selection will be there.Can anyone please help me on it.Here is my code below.

 <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;
}

推荐答案

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

Of course, you can do it. I have updated the codepen: https://codepen.io/samuellawrentz/pen/mjqmVZ

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

You just have to pick a point from the series data and then fire the select event on it during chart load. The condition to pick which point to be selected during load must be specified.

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

For now, I have hard-coded the 6th point to be selected during page load. Check out the codepen for details.

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

As you requested, I have updated the codepen,have a look. The value to be selected during click is given as a value attribute in the HTML. Then during the click event we are reading that attribute and selecting the point that was mentioned in the value attribute.

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

在单击10时将选择5th点，因为value属性的值为5.

Here 5th point will be selected when you click on 10 as the value of the value attribute is 5.

引用: https://api.highcharts.com/class-reference/Highcharts.Point#select

这篇关于如何在highchart中制作气泡图，选择加载时的气泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！