簡體   English   中英

jqPlot數據未顯示在折線圖上

[英]jqPlot Data Doesn't Show on Line Chart

目前,我對jQuery缺乏經驗是很明顯的。 我正在接收帶有“位置,YearPostDate,MonthPostDate和AverageSalary”列的jSON數據。 位置可以是“本地”或“國家”。 我想要在YearPostdate-MonthPostdate之前排成一行,而在國內排成一行。 在那里,但我知道我沒有正確組裝並正確顯示結構/陣列。

我已經經歷了許多不同的方式。 我已經使用普通代碼編寫了它,所以我知道它可以工作,但是當我開始實際提取數據並生成結構時,我有些困惑。 我已經測試了傳入的jSON-這不是問題。 嚴重缺乏我的jQuery和jqPlot技能。

這是我的代碼中需要幫助的內容:

$('#btnTrend').click( function() {
$( '#jobsDisplay' ).hide();
$( '#jobsDisplay' ).empty();
$( '#trendsError' ).hide();
if ( ($( '#rolesTitle' ).val() != null ) && ($( '#rolesLocation' ).val() != null ) ) {
    $('#rates').text("Loading...");
    $('#duration').text("Loading...");
    $('#jobs').text("Loading...");
    $('#trendData').show();
    $.ajax({
        url: 'http://somedomain.com/components/jobsDatabase.cfc',
        type: 'post',
        dataType: 'json',
        data: {
            method: 'getMarketRateTrend',
            role: $('#rolesTitle').val(),
            region_state: $('#rolesLocation').val(),
            returnFormat: 'json'
        },
        success: function(data) {
            var localList = [];
            var nationalList = [];
            var xAxis = [];
            var yValue = 0;
            var maxY = 100;
            var minY = 0;
            var lastValue = '';
            var finalLocal = '';
            var finalNational = '';


                $.each(data, function(i,val){ 
                    /*var xValue = data[i]['YearPostDate']+'-'+data[i]['MonthPostdate'];*/
                    var xValue = data[i]['MonthPostdate'];
                    if (lastValue != xValue) {
                        xAxis.push(xValue);
                        lastValue=xValue;
                    }
                    yValue = data[i]['AverageSalary'];
                    var zLocation = data[i]['location'];
                    if (zLocation=='National') {
                        nationalList.push([xValue,yValue]);
                        if (yValue > maxY) {
                            maxY = yValue;
                        }
                    } else {
                        localList.push([xValue,yValue]);
                        if (yValue > maxY) {
                            maxY = yValue;
                        }
                    }
                });
                yValue = yValue * 1.10;
                $( '#rates' ).empty();
                $.jqplot('rates',  
                    [[localList],
                    [nationalList]],
                    { title:'Market Rates',
                        series:[{color:'#5FAB78'}]
                    });
            },
            error: function(xhr, textStatus,errorThrown){
                alert(errorThrown);
            }
        });

    } else {
        $( '#trendsError' ).show();
    };
});

傳入的數據是

Local   2018    3   33.41
National    2018    3   33.23
Local   2018    4   34.09
National    2018    4   32.62
Local   2018    5   32.55
National    2018    5   32.82
Local   2018    6   34.98
National    2018    6   34.08

我現在的結果是帶有Market Rates標頭的空白圖表。 我正在尋找按月/年顯示的兩線圖表,其中一行用於本地數據,另一行用於國家數據,但是該圖表為空。

事實證明,我在做所有正確的事情,除了:

  • 案例返回的全部較低,因此應該是data [i] ['monthpostdate'],而不是data [i] ['MonthPostDate']
  • 不管是否需要,將數據[i] [無論什么]封裝在適當的Number()或String()函數中似乎都使它變得更快樂。
  • 為了獲得更多的愛,我將yValue更改為Number(data [i] ['averagesalary']。toFixed(2)),因為它是美元金額。

希望這些細微的,看似微不足道的事情對下一個人有所幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM