Javascript 如何根据数据更改海图半径_Javascript_Highcharts

Javascript 如何根据数据更改海图半径

javascript highcharts

Javascript 如何根据数据更改海图半径,javascript,highcharts,Javascript,Highcharts,我的数据由正负值组成，将在图表中显示。我我试图以这样的方式显示数据：正值的数据点大于负值的数据点。下面是我的代码 <html> <head> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script>

我的数据由正负值组成，将在图表中显示。我我试图以这样的方式显示数据：正值的数据点大于负值的数据点。下面是我的代码

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


更新
Highcharts.图表（‘人口图表’{
图表：{
键入：“散布”
},
xAxis：{
类别：[0,10,20,30,40,50,60,70,80]
},
系列：[{
名称：“温度”，
数据：[15,50，-56.5，-46.5，-22.1，-2.5，-27.7，-55.7,76.5]
}]
}，功能（图表）{
$（“#更新”）。单击（函数（）{
var data=chart.series[0]。数据；
var new_数组=[]；
新数组=数据；
console.log（新的_数组）；
对于（var i=0；i0）{
新_数组[i].y=“{y:+new_数组[i]+”，标记：{radius:10}”
log（“If:+new_数组[i].y”）；
}否则{
新_数组[i].y=“{y:+new_数组[i]+”，标记：{radius:4}”
log（“Else:+new_数组[i].y”）；
}
}
chart.series[0].setData（新的_数组）；
})
});

单击“更新”按钮时，必须更改数据点值半径的大小。

这种情况行得通吗

您只需使用

更新

方法即可获得满足条件的点，并更改标记选项。出于性能原因，最好将

redraw

参数设置为

false

，并在循环后重新绘制图表，以避免每次迭代时重新绘制

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

现场演示：

API参考：