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

【问题标题】：Passing an PHP Array as variable into Flot Bar Chart将 PHP 数组作为变量传递到 Flot 条形图
【发布时间】：2023-03-24 19:20:01
【问题描述】：

我正在尝试将我的 php 数组变量内爆到我的浮点条形图中。请问有什么办法吗？

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

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);
    }
});

我想得到这样的东西：

当我得到这个结果时：

如有任何想法，我将不胜感激。

【问题讨论】：

标签： php jquery arrays charts flot

【解决方案1】：

您将 y 轴的最大值设置为 20。

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

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

【讨论】：