猿问

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

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


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

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


白衣非少年
浏览 122回答 1
1回答

阿波罗的战车

您只需对符合您条件的点使用该方法,即可更改标记选项。出于性能原因,最好将参数设置为循环后重绘图表,以避免在每次迭代时重绘。updateredrawfalseHighcharts.chart('container', {&nbsp; &nbsp; ...}, function(chart) {&nbsp; &nbsp; $('#update').click(function() {&nbsp; &nbsp; &nbsp; &nbsp; var points = chart.series[0].points;&nbsp; &nbsp; &nbsp; &nbsp; points.forEach(function(point) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (point.y > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; point.update({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marker: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; radius: 10&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; chart.redraw();&nbsp; &nbsp; })});现场演示:http://jsfiddle.net/BlackLabel/jznums3L/接口参考:https://api.highcharts.com/class-reference/Highcharts.Point#updatehttps://api.highcharts.com/class-reference/Highcharts.Chart#redraw
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答