Question

我的图表系统名称有色,可下载。从根本上说,最能动地改变各阵列数据的内容? 因此,我有一个用户表,视用户而定,我点击了这个具有价值的阵列,或许是在该网页首次装满时,即把数据从实验室收集到表格中的所有用户(可能只有20个用户最大)之后,便会发生浮标事件,使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 } });
});

});

Answer 1

如果您的页面负荷用户数据看上了类似情况。

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

值得注意的是,你使用的数据标语是在点击活动中可以进入的背景/范围。我只是缩短了数据集。

友情链接