amcharts时间用json数据形成y轴

时间:2015-04-09 11:56:47

标签: javascript jquery angularjs svg html5-canvas

在我的js

中将分钟更改为hh:mm:ss格式
var allDataTime = [{
        date: new Date(2012, 0, 1),
       "col": "LONG CALL WAITING",
        "duration1": '720',
        "duration2": '57',
        "duration3": '57',
        "duration4": '57',
        "duration5": '57'


    }, {
        date: new Date(2012, 0, 1),
        "col": "Longest Agent Available",
         "duration1": '770',
        "duration2": '720',
        "duration3": '720',
        "duration4": '720',
        "duration5": '720'

    }
];


var TimeBilling = [{
        date: new Date(2012, 0, 1),
        "col": "LONG CALL WAITING",
        "type": "TimeBilling-cox-1",
        "duration1": '725',
        "duration2": '741',
        "duration3": '730'
    }, {
        date: new Date(2012, 0, 1),
        "col": "Longest Agent Available",
        "type": "TimeBilling-cox-1",
        "duration1": '725',
        "duration2": '741',
        "duration3": '730'
    }



];

var Timebillingcox1 = [{
        date: new Date(2012, 0, 1),
        "col": "LONG CALL WAITING",
        "type": "TimeBilling-cox-1",
        "duration1": '728',
        "duration2": '727',
        "duration3": '725'

    }, {
        date: new Date(2012, 0, 1),
        "col": "Longest Agent Available",
        "type": "TimeBilling-cox-1",
        "duration1": '728',
        "duration2": '727',
        "duration3": '725'
    }
];



//avdhesh
var TimeBILLINGSITEL = [{
        date: new Date(2012, 0, 1),
        "col": "LONG CALL WAITING",
        "type": "TimeBilling-cox-1",
        "duration1": '731',
        "duration2": '722'

    }, {
        date: new Date(2012, 0, 1),
        "col": "Longest Agent Available",
        "type": "TimeBilling-cox-1",
        "duration1": '731',
        "duration2": '722'
    }



];
//avdhesh

//avdhesh
var Timesainthcath = [{
        date: new Date(2012, 0, 1),
        "col": "LONG CALL WAITING",
        "type": "TimeBilling-cox-1",
        "duration1": '724',
        "duration2": '723',
        "duration3": '722'

    }, {
        date: new Date(2012, 0, 1),
        "col": "Longest Agent Available",
        "type": "TimeBilling-cox-1",
        "duration1": '724',
        "duration2": '723',
        "duration3": '722'
    }



];

var chartTypeTime="column";
var dataTypeTime="allDataTime";
var oldDataTime = "noDataTime";
var oldTypeTime=chartTypeTime;

callChartTime("allDataTime", chartTypeTime);

function callChartTime(type, chartTypeTime) {

    if(type=="noTime"){
        type=dataTypeTime;
    }

    if (type == "noDataTime") {
        type=oldDataTime;
        chartTypeTime=oldTypeTime;
    }
    var dataTime = "";
    var tleTime = []
    var drildownTime = true;
    if (type == "allDataTime") {
        dataTime = allDataTime;
        oldDataTime = "noDataTime";

        tleTime = ["Billing", "Technical", "Sales", "Retention", "Collection"];
    } else if (type == "Billing") {
        dataTime = TimeBilling;
        tleTime = ['BILLING-COX', 'BILLING-SITEL'];
    } else if (type == "BILLING-COX") {
        dataTime = Timebillingcox1;
        tleTime = ['PAYMENT', 'UNKOWN', 'TELEPHONE'];
        drildownTime = false;
    } else if (type == "BILLING-SITEL") {
        dataTime = TimeBILLINGSITEL;
        tleTime = ['SAINT CATH', 'PANAMA'];

    } else if (type == "SAINT CATH") {
        dataTime = Timesainthcath;
        tleTime = ['PAYMENT', 'UNKOWN', 'TELEPHONE'];
        drildownTime = false;

    }


    if(oldDataTime=="noDataTime"){
        $("#backchartTime").hide()
    }else{
        $("#backchartTime").show()
    }



    var grfTime = [];
    if (dataTime != "") {
        for (i = 0; i < tleTime.length; i++) {
            if(chartTypeTime=="column"){
            grfTime.push({
                "balloonText": tleTime[i] + ":[[value]]",
                "fillAlphas": 0.8,
                "id": "AmGraph_" + i,
                "lineAlpha": 0.2,
                "title": tleTime[i],
                "type": "column",
                "valueField": "duration" + (i + 1),
                "angle": "90",


            })
            }else if(chartTypeTime=="lineTime"){
               grfTime.push({

                "balloonText": tleTime[i] + ":[[value]]",
                "fillAlphas": 0.8,
                "id": "AmGraph_" + i,
                "lineAlpha": 0.2,
                "title": tleTime[i],
                "valueField": "duration" + (i + 1),
                "angle": "90",
                "bulletBorderAlpha": 1,
                "bulletColor": "#FFFFFF",
                "useLineColorForBulletBorder": true,
                "fillAlphas": 0,
                "bulletSize": 7,
                "bullet": "round",
                "hideBulletsCount": 50,
                "lineThickness": 2,
                "lineAlpha": 1,

               });
            }


 }





        var chart = AmCharts.makeChart("chartdivTime", {
            "type": "serial",

            "categoryField": "col",
"legend": {
        "horizontalGap": 10,
        "maxColumns": 1,
        "position": "right",
        "verticalAlign": 'bottom',
        "useGraphSettings": true,
        "markerSize": 10

    },
            "startDuration": 1,
            "categoryAxis": {
                "gridPosition": "0",
                "position": "left",
                "labelRotation": 45
            },
            "trendLines": [],
            "graphs": grfTime,
            "guides": [],
            "valueAxes": [{
                "id": "1",

                "axisAlpha": 0
            }, {
                "id": "2",

                "axisAlpha": 0
            }, {
                "id": "3",

                "axisAlpha": 0
            }, {
                "id": "4",

                "axisAlpha": 0
            }, {
                "id": "5",

                "axisAlpha": 0
            }],

            "allLabels": [],
            "amExport": {
                "right": 20,
                "top": 20
            },
            "balloon": {},
            "titles": [],
            "dataProvider": dataTime,

        });




        chart.addListener("clickGraphItem", function(event) {
            if (drildownTime) {
                oldDataTime = type;
                oldTypeTime =chartTypeTime;
                callChartTime(event.item.graph.title, chartTypeTime)
                dataTypeTime = event.item.graph.title;


            }


        });
    }

}

这是我的javascript代码。

<div id="chartdivTime" style="width: 100%; height: 355px;"></div>

我想在am图表中将我的持续时间转换为hh:mm:ss格式。我在上午的图表网站上搜索,但我没有得到任何符合我代码的东西。

1 个答案:

答案 0 :(得分:0)

您可能希望查看图表上每个图表对象的labelFunctionballoonFunction You can find info about both of those functions in the list here.您可以手动进行数学运算,将这些秒数转换为您想要的hh:mm:ss字符串格式,或者您可以使用类似moment.js的内容。

moment().startOf('day')
        .seconds(duration1)
        .format('H:mm:ss');