1

我的网站上有一个用户仪表板，用户可以在其中登录并查看某些内容。我希望他们能够看到的一件事是数据库中与他们相关的某些数据的图形表示。

我的数据库包含两个基本列。实际时间和目标时间。然后，我需要创建一个条形图，显示实际时间与目标时间的对比，以直观地表示两者。

我目前有以下用于条形图的 jScript 框架，并希望将我的数据显示在其中：

/*
 * charts/chart_bars_vertical.js
 *
 * Demo JavaScript used on charts-page for "Vertical Bars".
 */

"use strict";

$(document).ready(function(){

    // Sample Data
    var d1 = [];
    for (var i = 0; i <= 7; i += 1)
        d1.push([i, parseInt(Math.random() * 30)]);



    var d2 = [];
    for (var i = 0; i <= 7; i += 1)
        d2.push([i, parseInt(Math.random() * 30)]);

    var d3 = [];
    for (var i = 0; i <= 7; i += 1)
        d3.push([i, parseInt(Math.random() * 30)]);

    var ds = new Array();

    ds.push({
        label: "Bar #1",
        data: d1,
        bars: {
            show: true,
            barWidth: 0.2,
            order: 1
        }
    });
    ds.push({
        label: "Bar #2",
        data: d2,
        bars: {
            show: true,
            barWidth: 0.2,
            order: 2
        }
    });
    ds.push({
        label: "Bar #3",
        data: d3,
        bars: {
            show: true,
            barWidth: 0.2,
            order: 3
        }
    });

    // Initialize Chart
    $.plot("#chart_bars_vertical", ds, $.extend(true, {}, Plugins.getFlotDefaults(), {
        series: {
            lines: { show: false },
            points: { show: false }
        },
        grid:{
            hoverable: true
        },
        tooltip: true,
        tooltipOpts: {
            content: '%s: %y'
        }
    }));

});

任何帮助将不胜感激。

4

0 回答 0