为了账号安全,请及时绑定邮箱和手机立即绑定

如何根据数据更改高图表半径

如何根据数据更改高图表半径

白衣非少年 2022-09-23 21:44:49

我有由正值和负值组成的数据,这些数据将显示在图表中。我试图以正值的数据点大于负值的数据点的方式显示数据。以下是我的代码


<html>

    <head>

<script src="http://code.highcharts.com/highcharts.js"></script>

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

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    </head>

    <body>


        <div id="demochart"></div>

        <button id="update"> Update</button>

        <script>

            Highcharts.chart('demochart', {

                chart: {

                    type: 'scatter'

                },

                xAxis: {

                    categories: [0, 10, 20, 30, 40, 50, 60, 70, 80]

                },

                series: [{

                    name: 'Temperature',

                    data: [15, 50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, 76.5]

                }]

            },function(chart){

                $('#update').click(function(){

                    var data = chart.series[0].data;

                    var new_array = [];

                    new_array = data;

                    console.log(new_array);

                    for(var i = 0; i < new_array.length; i++){

                        console.log("For: "+ new_array[i].y);

                        if(new_array[i].y > 0){

                                new_array[i].y = "{y:"+ new_array[i] +",marker: {radius: 10}}"

                                console.log("If: "+ new_array[i].y);

                        }else{

                            new_array[i].y = "{y:"+ new_array[i] +",marker: {radius: 4}}"

                            console.log("Else: "+ new_array[i].y);

                        }

                    }

                    chart.series[0].setData(new_array);

                })

            });

</script>

    </body>

</html>

当我单击更新按钮时,必须更改数据点值半径的大小。这种情况能行吗?


查看完整描述

1 回答

?
阿波罗的战车

TA贡献1523条经验 获得超6个赞

您只需对符合您条件的点使用该方法,即可更改标记选项。出于性能原因,最好将参数设置为循环后重绘图表,以避免在每次迭代时重绘。updateredrawfalse


Highcharts.chart('container', {

    ...

}, function(chart) {

    $('#update').click(function() {

        var points = chart.series[0].points;


        points.forEach(function(point) {

            if (point.y > 0) {

                point.update({

                    marker: {

                        radius: 10

                    }

                }, false);

            }

        });


        chart.redraw();

    })

});

现场演示:http://jsfiddle.net/BlackLabel/jznums3L/


接口参考:


https://api.highcharts.com/class-reference/Highcharts.Point#update


https://api.highcharts.com/class-reference/Highcharts.Chart#redraw


查看完整回答
反对 回复 2022-09-23
  • 1 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信