动态Jquery图形填充变量

populating variable for dynamic Jquery Graph

本文关键字：变量 填充 图形 Jquery 动态      更新时间：2023-09-26

我有一个名为flot的绘图系统的脚本，可以下载。基本上什么是最好的方式来动态改变数组VAR数据的内容?所以我有一个用户表，根据用户我点击它填充数组值，也许当页面第一次加载我从php收集数据表中的所有用户(也许最多20个用户)然后一个onclick事件填充var数据变量和改变图形。只是不知道该怎么做??或者即使我能。

任何帮助将是伟大的感谢。

  <div id="placeholder" style="width:600px;height:300px"></div>
  <p><input id="clearSelection" type="button" value="Clear selection" />
  <input id="setSelection" type="button" value="Select year 1994" /></p>
  <p><label><input id="zoom" type="checkbox" />Zoom to selection.</label></p>
<script type="text/javascript">
$(function () {
var data = [
    {
        label: "United States",
        data: [[1990, 40.9], [1991, 18.7], [1992, 18.4], [1993, 19.3], [1994, 19.5], [1995, 19.3]]
    }
];
var options = {
    series: {
        lines: { show: true },
        points: { show: true }
    },
    legend: { noColumns: 2 },
    xaxis: { tickDecimals: 0 },
    yaxis: { min: 0 },
    selection: { mode: "x" }
};
var placeholder = $("#placeholder");
placeholder.bind("plotselected", function (event, ranges) {
    $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
    var zoom = $("#zoom").attr("checked");
    if (zoom)
        plot = $.plot(placeholder, data,
                      $.extend(true, {}, options, {
                          xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
                      }));
});
placeholder.bind("plotunselected", function (event) {
    $("#selection").text("");
});
var plot = $.plot(placeholder, data, options);
$("#clearSelection").click(function () {
    plot.clearSelection();
});
$("#setSelection").click(function () {
    plot.setSelection({ xaxis: { from: 1994, to: 1995 } });
});

});

如果页面加载时的用户数据是这样的

var users = [
    {
        name: "User1",
        label: "United States",
        data: [[1990, 40.9], [1991, 18.7], [1992, 18.4], [1993, 19.3]]
    },
    {
        name: "User2",
        label: "Germany",
        data: [[1990, 40.6], [1991, 18.2], [1992, 18.9], [1993, 19.4]]
    },
    {
        name: "User3",
        label: "Mexico",
        data: [[1990, 30.6], [1991, 28.2], [1992, 38.9], [1993, 29.4]]
    }
];

你可以动态地写一些可点击的内容…

for(var i = 0; i < users.length; i++) {
    $('body').append('<div class="user">' + users[i].name + '</div>');
    //store the data on the element itself
    $('.user:last').data.user_data = users[i];
}
//set up the click events
$('.user').each(function() {
    $(this).click(function(evt) {
        //set your data object using some of the user data
        data = $(this).data.user_data.data;
        //redraw the graph
    });
});

需要注意的一点是，您正在使用的数据对象需要位于可从单击事件访问的上下文/范围中。为了演示，我缩短了数据集。

相关文章：