Amchart未使用数据初始化

时间:2018-06-22 18:19:52

标签: amcharts

Am图表显示不正确,这是下面的ajax代码,图表的拇指不正确。 我正在使用ajax获取响应并初始化amchart(区域)

Ajax json响应数据

{"success":true,"graph_data":[{"date":"2018-06-21","value":121.65},{"date":"2018-06-20","value":121.65},{"date":"2018-06-19","value":121.5},{"date":"2018-06-18","value":121.3},{"date":"2018-06-17","value":120.55},{"date":"2018-06-16","value":119.84},{"date":"2018-06-14","value":119.88}],"min_period":"DD","message":null}

这里是我为amchart初始化的代码

var chart = AmCharts.makeChart( "graph_chart_div", {
    "type": "serial",
    "theme": "light",
    "marginRight": 5,
    "marginLeft": 5,
    "minPeriod":response.min_period,
    "autoMarginOffset": 5,
    "dataDateFormat": "YYYY-MM-DD",
    "valueAxes": [ {
        "id": "v1",
        "axisAlpha": 0,
        "position": "left",
        "ignoreAxisWidth": true
    } ],
    "balloon": {
        "borderThickness": 1,
        "shadowAlpha": 0
    },
    "graphs": [ {
        "id": "g1",
        "balloon": {
            "drop": true,
            "adjustBorderColor": false,
            "color": "#ffffff",
            "type": "smoothedLine"
        },
        "fillAlphas": 0.2,
        "bullet": "round",
        "bulletBorderAlpha": 1,
        "bulletColor": "#FFFFFF",
        "bulletSize": 5,
        "hideBulletsCount": 50,
        "lineThickness": 2,
        "title": "red line",
        "useLineColorForBulletBorder": true,
        "valueField": "value",
        "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
    } ],
    "chartCursor": {
        "valueLineEnabled": true,
        "valueLineBalloonEnabled": true,
        "cursorAlpha": 0,
        "zoomable": false,
        "valueZoomable": true,
        "valueLineAlpha": 0.5
    },
    "valueScrollbar": {
        "autoGridCount": true,
        "color": "#000000",
        "scrollbarHeight": 50
    },
    "categoryField": "date",
    "categoryAxis": {

        "gridPosition": "start",
        "labelRotation": 45,
        "minorGridEnabled": true,
        /* ENSURE 2 LINES BELOW ARE ADDED */
        "autoGridCount": false,
        "gridCount": 12,

        "parseDates": true,
        "dashLength": 1,
        // "minorGridEnabled": true
    },
    "export": {
        "enabled": false
    },
    // "dataProvider": graph_data
    "dataProvider": response.graph_data
} );

这是当前已初始化的图表

enter image description here

我想为我的数据显示以下图表

enter image description here

1 个答案:

答案 0 :(得分:2)

您的日期数据不正确。 AmCharts要求使用parseDates时,基于日期的数据必须按日期升序排列。

  

重要:如果将其设置为true,则数据点需要按升序进行预排序。顺序不正确的数据可能会导致图表出现视觉和功能故障。

确定排序顺序后,图表将正确显示。