Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
453 views
in Technique[技术] by (71.8m points)

javascript - Highcharts series setData from ajax php procedure

I am using Highcharts on my website. Then an Ajax PHP procedure to load data dynamically from database, by clicking on a legend item. Now I want to set the result into the series data but with no success as I am unable to use 'this' as 'this' is not the legend item anymore. You'll be able to understand it from the code below. I tried something like chart.series.setData[] but it did not work. Thanks for any solutions of how can I proceed.

<script>
Highcharts.chart('myChart', {
    series: [<?echo $allnames;?>],
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top'
    },
    plotOptions: {
        series: {
            events: {
                legendItemClick: function() {
                    var jmeno=this.name;
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                            myData= this.responseText;
                            //I am unable to use 'this' as it is not the legend item
                            this.setData([myData]);
                        }
                    };
                    xmlhttp.open("GET","/data.php?q="+jmeno,true);
                    xmlhttp.send();
                }
            }
        }
    },
});
</script>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Resolved.

<script>
Highcharts.chart('graf', {
    title: {text: 'Hello darkness my old friend'},
    series: [<?echo $allnames;?>],
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top'
    },
    plotOptions: {
        series: {
            events: {
                legendItemClick: function() {
                    var jmeno=this.name;
                    var that=this;
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                            var myData = this.responseText;
                            var splitData = myData.split(",");
                            var newData = [];
                            for(var i = 0;i<splitData.length;i++){
                                var num = splitData[i];
                                if(num != ""){
                                num = parseFloat(num);
                                newData.push(num);
                                }
                            }                           
                            that.setData(newData);
                        }
                    };
                    xmlhttp.open("GET","/data.php?q="+jmeno,true);
                    xmlhttp.send();
                }
            }
        }
    },
});
</script>


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...