将PHP数组作为变量传递到Flot条形图中

Question

我试图将我的php数组变量内爆到我的flot条形图中。好吗？

需要数组数组的flot数据的正确格式是什么？

somePlot = null;
$(function () {

    var data = $.map( <? php echo '['.implode(", ", $studentsage).']' ?> , function (val, idx) {
        return [[idx, val]];
    });

    var dataset = [{
        label: "Exams By Student Age",
        data: data,
        color: "#5482FF"
    }];
    var ticks = [
        [0, "0-2"]
    ]; // expand this for each idx in data

    var options = {
        series: {
            bars: {
                show: true
            }
        },
        bars: {
            align: "center",
            barWidth: 0.6,
            vertical: true,
            show: true
        },
        xaxis: {
            axisLabel: "Exams By Student Ages",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10,
            tickLength: 0,

            ticks: ticks

        },
        yaxis: {
            axisLabel: "Number of Exams",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3,

            max: 20,
            tickSize: 1,
            tickFormatter: function (v, axis) {
                return v;
            }
        },
        legend: {
            noColumns: 0,
            labelBoxBorderColor: "#000000",
            position: "nw"
        },
        grid: {
            clickable: true,
            borderWidth: 1,

            backgroundColor: {
                colors: ["#ffffff", "#EDF5FF"]
            }
        }
    };

    $(document).ready(function () {
        $.plot($("#flot-placeholder"), dataset, options);
        $("#flot-placeholder").UseTooltip();
    });

    function gd(year, month, day) {
        return new Date(year, month, day).getTime();
    }
    var previousPoint = null,
        previousLabel = null;

    $.fn.UseTooltip = function () {
        $(this).bind("plotclick", function (event, pos, item) {
            var links = ['../../Chart/StudentTests/result.php'];
            if (item) {
                //alert("clicked");
                //  window.location = (links[item.dataIndex]); 
                window.open(links[item.dataIndex], '_blank');
                console.log(item);
            } else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });
    };

    function showTooltip(x, y, color, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y - 40,
            left: x - 120,
            border: '2px solid ' + color,
            padding: '3px',
            'font-size': '9px',
            'border-radius': '5px',
            'background-color': '#fff',
            'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            opacity: 10
        }).appendTo("body").fadeIn(200);
    }
});

我想得到类似的东西：

虽然我得到了这个结果：

任何想法，我会很感激。

Answer 1

您可以将y轴的最大值设置为20.

删除该设置，flot将自动选择最大值。或者将其设置为大于最大值的数字。

您可能还想删除刻度尺寸设置或至少增加它。