在我的javascript函数中使用数据库数据

我正在做一个项目，我想用存储在mysql数据库中的一些数据创建一个可视化图表

$query = "SELECT * FROM  `tbldiary` ";
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
// get data and store in a json array
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
    $orders[] = array(
        'Datum' => $row['di_datum'],
        'Gevoel' => $row['di_gevoel']
      );
}

echo json_encode($orders);

?>

下面您可以看到我的phpcode，用于从数据库中获取数据。

$query = "SELECT * FROM  `tbldiary` ";
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
// get data and store in a json array
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
    $orders[] = array(
        'Datum' => $row['di_datum'],
        'Gevoel' => $row['di_gevoel']
      );
}

echo json_encode($orders);

?>

这是我制作图表的javascript代码

$(function() {

            var bar_data = {
                data: [["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9]],
                color: "#3c8dbc"
            };
            $.plot("#bar-chart", [bar_data], {
                grid: {
                    borderWidth: 1,
                    borderColor: "#f3f3f3",
                    tickColor: "#f3f3f3"
                },
                series: {
                    bars: {
                        show: true,
                        barWidth: 0.5,
                        align: "center"
                    }
                },
                xaxis: {
                    mode: "categories",
                    tickLength: 0
                }
            });
            /* END BAR CHART */
        });

所以我基本上想要的是实现从mysql到javascript函数的数据。

---

所以一月、二月，。。需要用

行['di_datum']

中的数据替换，数字需要用

行['di_gevoel']

中的数据替换。如果您发出AJAX请求，然后映射结果，您可以在$plot插件中使用它

$(function() {
        $.ajax({
        url: 'path/to/data',
        dataType: 'json',
        method: 'GET'
        }).done(function(data) {
            var plotData = [];
            for(var i = 0; i < data.length; i++)
                plotData.push([data[i].Datum, parseInt(data[i].Gevoel)]); 

            var bar_data = {
                data: plotData,
                color: "#3c8dbc"
            };

            $.plot("#bar-chart", [bar_data], {
                grid: {
                    borderWidth: 1,
                    borderColor: "#f3f3f3",
                    tickColor: "#f3f3f3"
                },
                series: {
                    bars: {
                        show: true,
                        barWidth: 0.5,
                        align: "center"
                    }
                },
                xaxis: {
                    mode: "categories",
                    tickLength: 0
                }
            });
        /* END BAR CHART */
    }); 
});

$（函数（）{
$.ajax({
url:'path/to/data'，
数据类型：“json”，
方法：“获取”
}).完成（功能（数据）{
变量plotData=[]；
对于（变量i=0；i

当AJAX请求成功时，它进入

done

方法，您可以从回调参数data访问响应。变量plotData刚刚初始化为空数组，for循环填充该数组

---

从AJAX请求返回的数据需要与示例中的数据具有相同的名称/值对。

不想使用AJAX吗？这个直接将查询到的mySQL数据放入Javscript的解决方案怎么样：

$(function() {
            var bar_data = {
                data: '<?=json_encode($orders,JSON_PRETTY_PRINT);?>',
                color: "#3c8dbc"
            };

$（函数（）{
var bar_数据={
数据：“”，
颜色：“3c8dbc”
};

将数据打印到。JSON_编码后JSON的输出是什么样子的？[{“数据”：“2014-04-26”，“Gevoel”：“5”}，{“数据”：“2014-04-28”，“Gevoel”：“10”}，{“数据”：“2014-04-28”，“Gevoel”：“-5”}，{“数据”：“2014-04-28”，“Gevoel”：“5”}]好的，这里有一个由关联数组生成的对象数组。您的图表插件需要一个数组，因此您需要对AJAX响应进行一点数据转换，以使其与您的插件一起工作。请参阅下面我的更新答案。它应该提供正确的赋值。我工作了，谢谢您的帮助。我已经尝试过了，并且已经成功了oesn不起作用。我需要填写var plotData=[]；？我更新了答案。您不需要手动填写plotData。for循环会解决这个问题。