使用xmlhttp进行高图动态数据显示

时间:2013-08-19 16:38:58

标签: javascript highcharts xmlhttprequest

我对我以前的脚本进行了更改,不确定是否可以在此处进行更改... 无论如何我想做的是 点击相应的链接,我想加载“高亮度线图”,这样用户就不必离开页面了。

我的 main.php 正文

user2 -- <a href="#" onClick = "showgraph(2)"><img src="go.png"></a><BR>
user3 -- <a href="#" onClick = "showgraph(3)"><img src="go.png"></a>
<script src="js/highcharts.js"></script>
<div id="container"></div>

主管部分包含[我在我的javascript中进行了新修改,与上一次相比]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
function showgraph(keyid,serid){
            $.ajax({
            type: "GET",
            url: "new_graph.php",
            data: "id="+keyid+"&serid="+serid,
            dataType: "json",
                success: function(data){
                drawgraph(data);
                }
            });
            return false;
        }


    function drawgraph(data){
            alert(data);
            var seriesData = [];
            var xCategories = [];
            var i, cat, series, namedata;
            for(i = 0; i < data.length; i++){
                cat = data[i].ddate;
                series = data[i].dvalue;
                namedata = data[i].dname;
                 //alert(cat);
                 if(xCategories.indexOf(cat) === -1){
                    xCategories[xCategories.length] = cat;
                    seriesData[seriesData.length] = series;
                 }
            }
            //alert(xCategories);
            alert(seriesData);
            //alert(namedata);
    $(function () {
         $('#container').highcharts({
            chart: {
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: namedata,
                x: -20 //center
            },
            subtitle: {
                text: 'Source: Sitename.com',
                x: -20
            },
            xAxis: {
                categories: xCategories
            },
            yAxis: {
                title: {
                    text: 'Date'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: namedata,
                data: seriesData
            }]
        });
    });
    }
</script>

new_graph.php 文件返回

我使用过php json_encode($ data)函数。

echo json_encode($return_arr);

返回

[{"dvalue":"25","ddate":"2013-07-25","dname":"samsung"},{"dvalue":"26","ddate":"2013-07-26","dname":"samsung"},{"dvalue":"25","ddate":"2013-07-27","dname":"samsung"},{"dvalue":"25","ddate":"2013-07-28","dname":"samsung"},{"dvalue":"24","ddate":"2013-07-29","dname":"samsung"},{"dvalue":"23","ddate":"2013-07-30","dname":"samsung"},{"dvalue":"21","ddate":"2013-07-31","dname":"samsung"},{"dvalue":"23","ddate":"2013-08-01","dname":"samsung"},{"dvalue":"30","ddate":"2013-08-02","dname":"samsung"},{"dvalue":"28","ddate":"2013-08-03","dname":"samsung"},{"dvalue":"25","ddate":"2013-08-04","dname":"samsung"},{"dvalue":"26","ddate":"2013-08-05","dname":"samsung"},{"dvalue":"30","ddate":"2013-08-06","dname":"samsung"},{"dvalue":"25","ddate":"2013-08-07","dname":"samsung"},{"dvalue":"30","ddate":"2013-08-08","dname":"samsung"}]

由于某种原因,图表没有显示出系列数据,其余的数据会打印在图表上,例如类别和名称。

我跟着这个帖子但没有运气 How to format my json data for stack column chart in HighCharts

老实说,我在jquery和highchart中并不擅长。如果有人在这里帮助我,我将不胜感激, 提前谢谢

1 个答案:

答案 0 :(得分:0)

我在你的代码中看到了很多潜在的问题我甚至不知道从哪里开始而不为你编码。

这是一个有希望的快速列表:

1。)发布到StackOverflow时需要花时间正确格式化代码。如果您的真实代码的格式是这样的,请花时间将其正确分隔并使其可读。

2。)这些天我永远不会创建一个XMLHttpRequest对象。 JQuery的AJAX功能可以让您的生活变得更加轻松(甚至可以在IE中运行)。我会开始阅读here

3。)alert(val+date);应该做什么?这是两个数组,添加它们,警报可能不是你想要的。

4。)这个:

for(i = 0; i < mySplitResult.length; i++) {
     var eachval=mySplitResult[i].split("|");
     val.push(eachval[0]);
     date.push(eachval[1]);
}
draw_graph(val,date);

错了。 Highcharts会想要你的价值数字(parseInt是你的朋友)。

您可能希望修复PHP以返回正确的AJAX而不是操纵字符串。

5.)最后检查categories: [date]data: [val](这些已经是数组,为什么要重新填入[]