Javascript 使用AJAX、PHP和MySQL的Flot图表行

我正在使用Flot插件获得一个包含两行（销售和采购）的图表行，就像但数据在mysql数据库中，并通过AJAX接收。所以我有这个：

HTML:

<div id="graph" class="demo-placeholder"></div>

我修改了JS代码，添加了一个显示图表的函数：

function show_chart(labell,dataa) { 
    var dataset = [{label: labell,data: dataa}];

    var chart_plot_01_settings = {
      series: {
        lines: {
          show: true,
          fill: true
        },
        splines: {
          show: false,
          tension: 0.4,
          lineWidth: 1,
          fill: 0.4
        },
        points: {
          radius: 3,
          show: true 
        },
        shadowSize: 2 
      },
      grid: { 
        verticalLines: true,
        hoverable: true,
        clickable: true,
        tickColor: "#d5d5d5",
        borderWidth: 1,
        color: '#717171'
      },
      colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
      xaxis: {
        tickColor: "rgba(51, 51, 51, 0.06)",
        mode: "time",
        tickSize: [1, "month"],
        //tickLength: 10,
        axisLabel: "Date",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
      },
      yaxis: {
        ticks: 8,
        axisLabel: "Amount",
        tickColor: "rgba(51, 51, 51, 0.06)",
      },
      tooltip: true,
    }

    $(document).ready(function () {
        $.plot($("#graph"), dataset, chart_plot_01_settings);

        //Tooltip
        $("<div id='tooltip'></div>").css({
            position: "absolute",
            display: "none",
            border: "1px solid #fdd",
            padding: "2px",
            "background-color": "#fee",
            opacity: 0.80
        }).appendTo("body");

        $("#graph").bind("plothover", function (event, pos, item) {

            if (item) {
                var x = item.datapoint[0],
                    y = item.datapoint[1];

                var date = new Date(x);

                $("#tooltip").html("Date: " + ('0' + (date.getMonth()+1)).slice(-2) + '/'+ date.getFullYear()+ " | Amount: "+y).css({top: item.pageY+5, left: item.pageX+5}).fadeIn(200);

            } else {
                $("#tooltip").hide();
            }

        });
    });

} //show chart

var purchases,sales;

    $.ajax({url: "purchases.php",
        type: "GET",
        dataType: "json",
        success: function(resp)
        {
            purchases = resp.data;
            var label1 = resp.label;
            show_chart(label1,purchases);       
        }
    });

    $.ajax({
        url: "sales.php",
        type: "GET",
        dataType: "json",
        success: function(resp)
        {
            sales = resp.data;
            var label2 = resp.label;
            show_chart(label2,sales);
        }
    });

function show_chart(data1,data2) {
    var dataset = [{label: "Purchases",data: data1},{label: "Sales",data: data2}];
    //and continues...
}

函数显示图表（labell，dataa）{ var数据集=[{label:labell，data:dataa}]； 变量图表\绘图\ 01\设置={ 系列：{ 线路：{ 秀：没错， 填充：正确 }, 样条曲线：{ 秀:假,， 张力：0.4， 线宽：1， 填充：0.4 }, 要点：{ 半径：3， 秀：真的 }, 阴影大小：2 }, 网格：{ 没错， 悬停：是的， 可点击：正确， 勾选颜色：“d5d5d5”， 边框宽度：1， 颜色：“#717171” }, 颜色：[“rgba（381851540.38）”，“rgba（3888106,0.38）”， xaxis：{ tickColor:“rgba（51,51,51,0.06）”， 模式：“时间”， tickSize:[1，“月”]， //长度：10， 标签：“日期”， Axislabulusecanvas：没错， axisLabelFontSizePixels:12， axisLabelFontFamily:“Verdana，Arial”， axisLabelPadding:10 }, 亚克斯：{ 滴答声：8， axisLabel：“金额”， tickColor:“rgba（51,51,51,0.06）”， }, 提示：正确， } $（文档）.ready（函数（）{ $.plot（$（“#图形”）、数据集、图表#plot_01_设置）； //工具提示 $（“”）.css({ 位置：“绝对”， 显示：“无”， 边框：“1px实心#fdd”， 填充：“2px”， “背景色”：“费用”， 不透明度：0.80 }).附于（“主体”）； $（“#图形”）.bind（“plothover”、函数（事件、位置、项目）{ 如果（项目）{ var x=项。数据点[0]， y=项目数据点[1]； var日期=新日期（x）； $（“#工具提示”）.html（“日期：+（'0'+（Date.getMonth（）+1））.slice（-2）+'/'+Date.getFullYear（）+”；金额：+y）.css（{top:item.pageY+5，left:item.pageX+5}）.fadeIn（200）； }否则{ $（“#工具提示”）.hide（）； } }); }); }//显示图表 var购买、销售； $.ajax（{url:“purchases.php”， 键入：“获取”， 数据类型：“json”， 成功：功能（resp） { 采购=相应数据； var label1=相应的标签； 显示图表（标签1，采购）； } }); $.ajax({ url:“sales.php”， 键入：“获取”， 数据类型：“json”， 成功：功能（resp） { 销售=相应数据； var label2=相应的标签； 显示图表（标签2，销售）； } }); 但问题是，它只显示销售或采购图表行，我想同时显示两个图表行（销售和采购）

---

如何修复它？

您的时间数据格式错误，Flot需要JavaScript时间戳。而不是

[["2013-02-01","52"],["2013-03-01","40"],["2013-03-28","200"]]          

你需要

[[1359676800000,"52"],[1362096000000,"40"],[1364428800000,"200"]]          

使用

---

在您的PHP代码中生成时间戳（请参见）。

最后，我可以将两个PHP文件合并在一个文件中并放置一个最终数组：

echo json_encode(array($return,$returnn));

在AJAX成功中：

success: function(resp)
{
    var result1 = resp[0];//purchases
    var result2 = resp[1];//sales
    show_chart(result1,result2);
}

在显示购物车功能中：

function show_chart(labell,dataa) { 
    var dataset = [{label: labell,data: dataa}];

    var chart_plot_01_settings = {
      series: {
        lines: {
          show: true,
          fill: true
        },
        splines: {
          show: false,
          tension: 0.4,
          lineWidth: 1,
          fill: 0.4
        },
        points: {
          radius: 3,
          show: true 
        },
        shadowSize: 2 
      },
      grid: { 
        verticalLines: true,
        hoverable: true,
        clickable: true,
        tickColor: "#d5d5d5",
        borderWidth: 1,
        color: '#717171'
      },
      colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
      xaxis: {
        tickColor: "rgba(51, 51, 51, 0.06)",
        mode: "time",
        tickSize: [1, "month"],
        //tickLength: 10,
        axisLabel: "Date",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
      },
      yaxis: {
        ticks: 8,
        axisLabel: "Amount",
        tickColor: "rgba(51, 51, 51, 0.06)",
      },
      tooltip: true,
    }

    $(document).ready(function () {
        $.plot($("#graph"), dataset, chart_plot_01_settings);

        //Tooltip
        $("<div id='tooltip'></div>").css({
            position: "absolute",
            display: "none",
            border: "1px solid #fdd",
            padding: "2px",
            "background-color": "#fee",
            opacity: 0.80
        }).appendTo("body");

        $("#graph").bind("plothover", function (event, pos, item) {

            if (item) {
                var x = item.datapoint[0],
                    y = item.datapoint[1];

                var date = new Date(x);

                $("#tooltip").html("Date: " + ('0' + (date.getMonth()+1)).slice(-2) + '/'+ date.getFullYear()+ " | Amount: "+y).css({top: item.pageY+5, left: item.pageX+5}).fadeIn(200);

            } else {
                $("#tooltip").hide();
            }

        });
    });

} //show chart

var purchases,sales;

    $.ajax({url: "purchases.php",
        type: "GET",
        dataType: "json",
        success: function(resp)
        {
            purchases = resp.data;
            var label1 = resp.label;
            show_chart(label1,purchases);       
        }
    });

    $.ajax({
        url: "sales.php",
        type: "GET",
        dataType: "json",
        success: function(resp)
        {
            sales = resp.data;
            var label2 = resp.label;
            show_chart(label2,sales);
        }
    });

function show_chart(data1,data2) {
    var dataset = [{label: "Purchases",data: data1},{label: "Sales",data: data2}];
    //and continues...
}

---

您是否尝试过在ajax本身的成功块中实例化flot图表？imo是最简单的方法之一（因为您需要首先完成服务器响应）。在顶部定义选项，进行ajax调用，然后在成功后实例化flot。（我会怎么做）。也检查控制台是否有错误btwDid是否在sale.php和purchase.php中打印

$return

数组？@ArshadShaikh是的，我得到了信息，但它没有显示在图表中。@Ghost是的，我也试过了，我将flot图表放在success和variable DATASE中，但更糟糕的是，在数据集中显示了一个带有虚拟数据的错误，并检查了实际数据和来自ajax resposne的数据。感谢您的回答！我更新了我的问题，添加了修正和JS函数，但它只显示了一条图表线

echo json_encode(array($return,$returnn));

success: function(resp)
{
    var result1 = resp[0];//purchases
    var result2 = resp[1];//sales
    show_chart(result1,result2);
}

function show_chart(data1,data2) {
    var dataset = [{label: "Purchases",data: data1},{label: "Sales",data: data2}];
    //and continues...
}