Question

这是我的任务：

使用jquery图表创建一个显示值的页面，该图表可以使用AJAX在日视图和月视图之间切换

x轴：天/月

y轴：a，b，c，d

我已准备好所有变量值，并使用下拉列表更改变量。我只是不知道如何将这些值提供给jquery图表。我正在使用jqxchart。

我如何实现这一目标？请用代码说明。另外我如何在jqxchart中提供日期和月份？

这是html代码：

    <div id="chartContainer" style="width:800px; height: 400px"></div>

        <div id="valueAxisDiv" class="form-group">
            <h3>Value Axis : </h3>
            <select id="valueAxis">
                <option>Total number of Feedback entries by Category</option>
                <option>Average Score by Category</option>
                <option>Total number of Feedback entries</option>
                <option>Average Score</option>
            </select>
            <select id="fbCategory"></select>
        </div>

        <div id="xAxisDiv" class="form-group">
            <h3>X-Axis : </h1>
                <select id="dayMonthSelector">
                    <option>Day-wise</option>
                    <option>Month-wise</option>
                </select>
        </div>

和js代码：

var fbCat=new Array();
var total=new Array();
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var baseUnit_xAxis;
var maxValue_valueAxis;
var seriesDataField;
var maxAvgScore=0;
var interval;

$.getJSON("admin_php.php",function(data){

    total_no_of_feedback_entries=data.length;

    $.each(data,function(i,item){
        fbCat[i]=item.fbCat;
    })

    $.unique(fbCat);

    $.each(fbCat,function(i,item){
        $('#fbCategory').append($('<option>', { 
            value: item,
            text : item
        }));
    });

    function dayMonthWise(dataobj,wise,isCategorySet){

    $.each(dataobj,function(i,item){
        if(wise=='day'){
            item.date=item.dateTime.substring(0,10);
            item.date=new Date(item.date);
        }
        else if(wise=='month'){
            item.date=item.dateTime.substring(0,7);
            item.date=new Date(item.date);
        }
    });

    function countValue(item,array){
        var count=0;
        $.each(array,function(i,v){
            if(v.date.toDateString()==item.toDateString())
                    count++;
        })
        return count;
    }

    $.each(dataobj,function(i,x){
        $.each(dataobj,function(j,y){
            if(x.date<y.date){
                swap=dataobj[i];
                dataobj[i]=dataobj[j];
                dataobj[j]=swap;
            }
        })
    });

    console.log("Total : ")                                  
    $.each(dataobj,function(i,item){ 
        item.total=countValue(item.date,dataobj); 
        console.log(item.total);
    });

    for(i=0;i<dataobj.length;i+=dataobj[i].total){ 

        var score=0;
        var k=1;
        for(j=i;k<=dataobj[i].total;j++,k++){
            if(isCategorySet){
                if(dataobj[j].fbCat==$("#fbCategory").val())
                    score+=Number(dataobj[j].score);
            }
            else
                score+=Number(dataobj[j].score);     
        }

        avgScore=score/dataobj[i].total;

        if(maxAvgScore<avgScore)
            maxAvgScore=avgScore;
        console.log("Avg Score : ")
        for(j=i,k=0;k<dataobj[i].total;j++,k++){
            dataobj[j].avgScore=avgScore;
            console.log(avgScore);
        }
    }   
}
            $("#valueAxis,#dayMonthSelector,#fbCategory").on("change",function(){
        if($("#valueAxis").prop('selectedIndex')<2)
            $("#fbCategory").slideDown();
        else
            $("#fbCategory").slideUp();  

        var temp=new Array();
        for(i=0,j=0;i<data.length;i++){
            if(data[i].fbCat==$("#fbCategory").val()){
                if(temp[j]===undefined)
                    temp[j]=[];
                temp[j++]=data[i];  
            }
        }

        switch($("#valueAxis").prop('selectedIndex')){
            case 0:
                if($("#dayMonthSelector").prop('selectedIndex')==0)                     {
                    dayMonthWise(temp,'day',true);
                    baseUnit_xAxis='day'; 
                    interval=5;
                }
                else   if($("#dayMonthSelector").prop('selectedIndex')==1){
                    dayMonthWise(temp,'month',true);
                    baseUnit_xAxis='month';
                    interval=1;
                }
                maxValue_valueAxis=total_no_of_feedback_entries;
                seriesDataField='total';
            break;

            case 1:
                if($("#dayMonthSelector").prop('selectedIndex')==0)                     {
                    dayMonthWise(temp,'day',true);
                    baseUnit_xAxis='day'; 
                    interval=5;
                }
                else if($("#dayMonthSelector").prop('selectedIndex')==1){
                    dayMonthWise(temp,'month',true);
                    baseUnit_xAxis='month';
                    interval=1;
                }
                maxValue_valueAxis=maxAvgScore;
                seriesDataField='avgScore';
            break;

            case 2:
                if($("#dayMonthSelector").prop('selectedIndex')==0)                     {
                    dayMonthWise(data,'day',false);
                    baseUnit_xAxis='day';
                    interval=5;
                }
                else if($("#dayMonthSelector").prop('selectedIndex')==1){
                    dayMonthWise(data,'month',false);
                    baseUnit_xAxis='month';
                    interval=1;
                }
                maxValue_valueAxis=total_no_of_feedback_entries;
                seriesDataField='total';
            break;

            case 3:
                if($("#dayMonthSelector").prop('selectedIndex')==0)                     {
                    dayMonthWise(data,'day',false);
                    baseUnit_xAxis='day';
                    interval=5;
                }
                else if($("#dayMonthSelector").prop('selectedIndex')==1){
                    dayMonthWise(data,'month',false);
                    baseUnit_xAxis='month';
                    interval=1;
                }
                maxValue_valueAxis=maxAvgScore;
                seriesDataField='avgScore';
            break;
        }

        var settings = {
            title: "Feedback Analysis",
            description: "Details of feedback entries",
            padding: { left: 5, top: 5, right: 50, bottom: 5 },
            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
            source: data,
            xAxis:{
                dataField: 'date',
                formatFunction: function (value) {
                    return value.getDate() + '-' +   months[value.getMonth()] + '-' + value.getFullYear();
                },
                type: 'date',
                baseUnit: baseUnit_xAxis,
                valuesOnTicks: true,
                minValue: data[0].date,
                maxValue: data[data.length-1].date,
                tickMarks: {
                    visible: true,
                    interval: 1,
                    color: '#BCBCBC'
                },
                unitInterval: interval,
                gridLines: {
                    visible: true,
                    interval: 3,
                    color: '#BCBCBC'
                },
                labels: {
                    angle: -45,
                    rotationPoint: 'topright',
                    offset: { x: 0, y: -25 }
                }
            },
            valueAxis:{
                minValue: 0,
                maxValue: maxValue_valueAxis,
                unitInterval: 1,
                title: {text: $("#valueAxis").val()}
            },
            colorScheme: 'scheme01',
            seriesGroups:
            [{
                type: 'line',
                series: [{dataField: seriesDataField, displayText:$("#valueAxis").val()}]
            }]
        };

        $('#chartContainer').jqxChart(settings); 

    });  

});

php代码很简单。我只用json格式的整个表格

一切正常，除非将某些值传递给图表，图表会打印但没有任何数据。但发送到图表的值是正确的。

对于按类别划分的平均分数选项，图表中不会显示任何数据。发送的数据再次正确。

Answer 1

我想问题出在您发送到图表的JSON结构中。要进行调试，只需在行var setting = {之前对以下数据进行硬编码并执行即可。如果这样做，请将您的数据json更改为此格式。这将解决问题

var data = [{ x: 0.35, y: 14.5 }, { x: 1, y: 2.5 }, { x: 10, y: 0.2 }, { x: 100, y: 205 }, { x: 1, y: 100 }, { x: 5.11, y: 10.13 }, { x: 20.13, y: 10.13 }, { x: 600, y: 300}]

使用jQuery图表显示动态数据

1 个答案: