【问题标题】:Highcharts not rendering with array loaded with ajaxHighcharts 不使用加载了 ajax 的数组进行渲染
【发布时间】:2013-11-10 13:24:43
【问题描述】:

我刚开始使用 Highcharts,但已经遇到了问题。 我想用来自 Ajax 调用的数据填充我的图表,但它只显示一个空白图表。

首先我想向您展示我是如何获取数据的:

<?php

require_once("mysql_config.php");
$query = "SELECT temp FROM daten ORDER BY daten.id DESC LIMIT 0,6";

$answer = mysqli_query($mysqli,$query);
$row;

while($row = $answer->fetch_array()){
    echo $row['temp'] . ",";
}

?>

这个输出看起来像:-20,0,0,7,0,0,100

还有我的 AJAX 函数:

function ajax(website, element, callback) {
    var http = null;
    var http = new XMLHttpRequest();
    var url = website;

    if(http!=null){
        http.open("POST",url,true);
        http.onreadystatechange = function(){

            if(http.readyState == 4){

                var text = http.responseText;
                callback(text, element);

            }

        }//Ende readychange

        http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        http.send();

    }//Ende if(http2!=null)

}//Ende Funktion

回调是我的 create_chart 函数

function create_chart(rawdata, element){

newdata = rawdata.split(",");

//var newdata = [-20,0,0,7,0,0,100];

var chart = new Highcharts.Chart({
        chart: {
            type: 'line',
            renderTo: 'test'
        },
        title: {
            text: 'Testchart'
        },
        subtitle:{
            text: 'Subtitle'
        },
        xAxis: {
            categories: ['A','B','C','D','E','F','G']
        },
        yAxis: {
            title: {
                text: 'This is it'
            }
        },
        series: [{
            name: "Test",
            data: newdata
        }]
});

 }

问题是,它只在使用 ajax 时绘制没有数据的图形,但是当我使用“预填充”数组(如我注释掉的那个)时,它工作正常。

【问题讨论】:

  • 如果您在 create_chart 函数中使用 console.log(newdata),输出是什么?
  • 答案已解决,但感谢您尝试帮助我:D

标签: javascript php ajax arrays highcharts


【解决方案1】:

newdata 是一个字符串,当你拆分它时,它的部分就是字符串。

"-20,0,0,7,0,0,100".split(",") = ["-20","0","0","7","0","0" ,"100"]

Highcharts 需要数字,所以拆分后,parseInt 将它们变成数字:

var rawdata = "-20,0,0,7,0,0,100";
var strdata = rawdata.split(",");
var newdata = []
for (var i = 0; i < strdata.length; i++)
{
   newdata.push(parseInt(strdata[i]));
} 

小提琴here.

【讨论】:

    【解决方案2】:

    检查来自数据类型为对象的 ajax 的响应与否。因为 highcharts 可以正常工作,所以响应的数据类型为对象。

    如果它以字符串形式返回,则使用将其转换为对象 eval('(' + 响应 + ')')

    【讨论】:

      猜你喜欢
      • 2013-03-18
      • 2010-10-26
      • 2018-06-25
      • 1970-01-01
      • 1970-01-01
      • 2018-11-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多