如何根据文本字段输入的值构建图表?

时间:2011-03-08 02:16:16

标签: jquery charts

我有一个包含10个文本字段的页面,这些文本字段会根据用户在上一页上输入的内容动态填充。

我想在简单的条形图中显示这些值。我已经设置了jqPlot,是的,我似乎无法让它工作。是否有人可以在这里查看第2页,让我知道如何调用文本字段输入值来构建条形图?

http://www.beatinganger.com/stress-test

非常感谢。

2 个答案:

答案 0 :(得分:2)

这似乎对我有用:

jQuery(function($) {
    var ticks = [], vals = [];
    $('#edit-submitted-physical-state, #edit-submitted-mental-state, #edit-submitted-feelingso-of-belonging, #edit-submitted-feelings-of-justice, #edit-submitted-feeings-of-integrity, #edit-submitted-weight-management, #edit-submitted-emotional-ease, #edit-submitted-feelings-of-stimulation, #edit-submitted-feelings-of-justice, #edit-submitted-feelings-of-relationsip')
        .each(function(i, el) {
            vals.push(Number(el.value));
            ticks.push($('label[for="'+el.id+'"]').text().replace('Feelings of ', '').replace(': ', ''));
        });

    var plot1 = $.jqplot('chart1', [vals], {
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            }
        }
    });
});

我循环遍历所有字段并将每个字段的值推入vals数组。请记住,jQuery的.val()仅返回第一个匹配项的值。我也使用Number()来确保它们是数字而不是字符串。

您可能希望使用ticks执行其他操作 - 我只是在输入数字。

我建议您在要读取的所有文本字段上设置一个特殊类,然后使用该类引用它们,而不是使用ID。然后上面的第3行将简单地读取:

$('.special_class_here').each(function(i, el) { 

答案 1 :(得分:0)

我认为你只是传递答案的ID而不是价值。你需要通过

$("edit-submitted-mental-state").val()