Question

我试图在条形图上生成图表的值但是我得到了错误消息：警告：无法读取未定义的属性“getData”。这是我的代码，我已经声明了变量P，我正在使用XAMPP，我的浏览器支持剪贴板API。如果有人可以帮我这个。

    var rlm = <?php echo json_encode($rlm_data); ?>;
    var rlm_list = <?php echo json_encode($rlm_list); ?>;

    function get_graph_datarlm(rlm,rlm_list){
    var arlm = [];
        for (var i = 1; i < rlm_list.length; i++)
            arlm.push([i, rlm[rlm_list[i]][0]]);
    var brlm = [];
        for (var i = 1; i < rlm_list.length; i++)
            brlm.push([i, rlm[rlm_list[i]][1]]);

    var datarlm = [
            {
                label: "XaktaMissingTickets",
                data: arlm,
                bars: {
                    show: true,
                    barWidth: 0.6,
                    fill: true,
                    lineWidth: 0,
                    order: 0,
                    fillColor: "#5b9bd5",
                    fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.8 } ] }
                },
                //color: "#ffffff"
                color: "#5b9bd5"
            },
            {
                label: "TotalTickets",
                data: brlm,
                bars: {
                    show: true,
                    barWidth: 0.6,
                    fill: true,
                    lineWidth: 0,
                    order: 1,
                    fillColor: "#ed7d31",
                    fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.8 } ] }
                },
                //color: "#ffffff"
                color: "#ed7d31"
            }
        ];
        return datarlm; 
    }


    $(document).ready(function() {

            var p;
            function plot_bar_chart(rlm,rlm_list){

                var trlm    = [];
            for (var i = 0; i < rlm_list.length; i += 1)
                trlm.push([i, rlm_list[i]]);
                //console.log( t87r );
        var p = $.plot("#placeholderrlm", get_graph_datarlm(rlm,rlm_list), {
            xaxis: {
                min: 0,
                max: rlm_list.length,
                ticks: trlm,
                tickLength: 0,
                //labelWidth: 15,
                labelAlign: 'center',
                axisLabelPadding: 5,
                //font: { size: 14, color: 'black' }
            },
            yaxis: {
                axisLabel: 'Number of Projects',
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 30,
                axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                axisLabelPadding: 5
            },
            grid: {
                hoverable: true,
                clickable: false,
                borderWidth: 1
            },
            legend: {
                labelBoxBorderColor: "none",
                position: "right"
            },
            series: {
                shadowSize: 1,
            }
        });
        }
plot_bar_chart(rlm,rlm_list);

        function showTooltip(x, y, contents, z) {
            $('<div id="flot-tooltip">' + contents + '</div>').css({
                top: y - 60,
                left: x + 30,
                'border-color': z,
            }).appendTo("body").fadeIn(200);
        }

        $("#placeholderrlm").bind("plothover", function (event, pos, item) {
            var previousPoint;
            if (item) {
                if (previousPoint != item.datapoint) {
                    previousPoint = item.datapoint;
                    $("#flot-tooltip").remove();

                    var originalPoint;

                    if (item.datapoint[0] == item.series.data[0][3]) {
                        originalPoint = rlm_list[1];
                    }

                    var x = originalPoint;
                    y = item.datapoint[1];
                    z = item.series.color;

                    showTooltip(item.pageX, item.pageY,
                        "<b>" + "Series " + item.series.label + "</b><br /> " + "Point " + x + "</b><br /> " + " Value: " + y,
                        z);
                }
            } else {
                $("#flot-tooltip").remove();
                previousPoint = null;
            }
        });


        $.each(p.getData()[0].data, function(i, el){
            var o = p.pointOffset({x: el[0], y: el[1]});
            $('<h4 class="rotate" align="center">' + el[1] + '</h4>').css( {
                position: 'absolute',
                left: o.left - 125,
                top: o.top - 40,
                display: 'none',
                padding: 1,
            }).appendTo(p.getPlaceholder()).fadeIn('slow');
        });

        $.each(p.getData()[1].data, function(i, el){
            var o = p.pointOffset({x: el[0], y: el[1]});
            $('<h4 class="rotate" align="center">' + el[1] + '</h4>').css( {
                position: 'absolute',
                left: o.left + 100,
                top: o.top + 15,
                display: 'none',
                padding: 1,
            }).appendTo(p.getPlaceholder()).fadeIn('slow');
        });



    var reload_url = "?PrePac=<?php echo $_GET['PrePac']; ?>&region=<?php echo $_GET['region']; ?>&project=<?php echo $_GET['project']; ?>&partner=<?php echo $_GET['partner']; ?>";
    $(".ajax_load").click(function(e){
        e.preventDefault();
        reload_url=$(this).attr('href');
        var region = $(this).data('region'),project = $(this).data('project');
        $.getJSON( "quality_bar-ajax.php"+reload_url, function( data ) {
            refresh_chart(data);
            $(".region_name").text(region);
            $(".project_name").text(project);
        });
        return false;
    });
    setInterval(function(){
        $.getJSON( "quality_bar-ajax.php"+reload_url, function( data ) {
            refresh_chart(data);
        });
    }, 3000);   

    function refresh_chart(data){
        plot_bar_chart(data.rlm,data.rlm_list);
        p.setupGrid(); //only necessary if your new data will change the axes or grid
        p.draw();
    }
    });

Answer 1

您定义了p两次。在代码中查找var p。

仅使用var p = $.plot更改p = $.plot。

无法读取未定义的属性'getData'

1 个答案: