Amchart类别轴中的时间戳显示为未定义

时间:2017-04-20 05:16:06

标签: javascript amcharts

我正在尝试在amchart类别轴上显示时间戳,但它在图表中显示为undefined。这是图表代码:

    var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "marginTop":0,
    "marginRight": 80,
    "dataProvider": [{
    "date": 1492664639000,
    "value": 10
}, {
    "date": 1492664646000,
    "value": 20
}, {
    "date": 1492664653000,
    "value": 20
}, {
    "date": 1492664660000,
    "value": 23
}, {
    "date": 1492664667000,
    "value": 35
}, {
    "date": 1492664674000,
    "value": 26
}, {
    "date": 1492664681000,
    "value": 30
}],
    "valueAxes": [{
        "axisAlpha": 0,
        "position": "left"
    }],
    "graphs": [{
        "id":"g1",
        "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
        "bullet": "round",
        "bulletSize": 8,
        "lineColor": "#d1655d",
        "lineThickness": 2,
        "negativeLineColor": "#637bb6",
        "type": "smoothedLine",
        "valueField": "value"
    }],
    "chartScrollbar": {
        "graph":"g1",
        "gridAlpha":0,
        "color":"#888888",
        "scrollbarHeight":55,
        "backgroundAlpha":0,
        "selectedBackgroundAlpha":0.1,
        "selectedBackgroundColor":"#888888",
        "graphFillAlpha":0,
        "autoGridCount":true,
        "selectedGraphFillAlpha":0,
        "graphLineAlpha":0.2,
        "graphLineColor":"#c2c2c2",
        "selectedGraphLineColor":"#888888",
        "selectedGraphLineAlpha":1

    },
    "chartCursor": {
        "categoryBalloonDateFormat": "fff",
        "cursorAlpha": 0,
        "valueLineEnabled":true,
        "valueLineBalloonEnabled":true,
        "valueLineAlpha":0.5,
        "fullWidth":true
    },
    "dataDateFormat": "YYYY-MM-DD HH:NN:SS",
   "categoryField": "timestamp",
                    "categoryAxis": {
                        "minPeriod": "fff"
                    }
});

这是DEMO

1 个答案:

答案 0 :(得分:2)

您使用错误的密钥作为参考。试试这个。 (在这里演示:https://codepen.io/anon/pen/ZKQPJL

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "marginTop":0,
    "marginRight": 80,
    "dataProvider": [{
    "timestamp": 1492664639000,
    "value": 10
}, {
    "timestamp": 1492664646000,
    "value": 20
}, {
    "timestamp": 1492664653000,
    "value": 20
}, {
    "timestamp": 1492664660000,
    "value": 23
}, {
    "timestamp": 1492664667000,
    "value": 35
}, {
    "timestamp": 1492664674000,
    "value": 26
}, {
    "timestamp": 1492664681000,
    "value": 30
}],
    "valueAxes": [{
        "axisAlpha": 0,
        "position": "left"
    }],
    "graphs": [{
        "id":"g1",
        "balloonText": "[[timestamp]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
        "bullet": "round",
        "bulletSize": 8,
        "lineColor": "#d1655d",
        "lineThickness": 2,
        "negativeLineColor": "#637bb6",
        "type": "smoothedLine",
        "valueField": "value"
    }],
    "chartScrollbar": {
        "graph":"g1",
        "gridAlpha":0,
        "color":"#888888",
        "scrollbarHeight":55,
        "backgroundAlpha":0,
        "selectedBackgroundAlpha":0.1,
        "selectedBackgroundColor":"#888888",
        "graphFillAlpha":0,
        "autoGridCount":true,
        "selectedGraphFillAlpha":0,
        "graphLineAlpha":0.2,
        "graphLineColor":"#c2c2c2",
        "selectedGraphLineColor":"#888888",
        "selectedGraphLineAlpha":1
    },
    "chartCursor": {
        "categoryBalloonDateFormat": "fff",
        "cursorAlpha": 0,
        "valueLineEnabled":true,
        "valueLineBalloonEnabled":true,
        "valueLineAlpha":0.5,
        "fullWidth":true
    },
    "dataDateFormat": "YYYY-MM-DD HH:NN:SS",
    "categoryField": "timestamp",
	"categoryAxis": {
	    "minPeriod": "fff"
	}
});