AMChart 日期时间实现

Posted 2023-05-08

【中文标题】AMChart 日期时间实现

【英文标题】：AMChart datetime implementation

【发布时间】：2021-10-21 01:33:48

【问题描述】：

我想在Amchart 中创建一个带有日期时间轴的图表。

最短时间应该以小时为单位，所以我添加了 minPeriod:"hh"。数据在 html 内部，在标签之间。我尝试使用以下功能，但我得到一个空白图表（带有白色背景）。

可能是什么问题？ 我就是这样尝试的：

JS函数：

$(function() 
    var amchart = AmCharts.makeChart("sales-analytics", 
        "type": "serial",
        "theme": "light",
        "marginTop": 0,
        "marginRight": 0,
        "dataProvider": chartvalues,
        "valueAxes": [
            "axisAlpha": 0,
            "gridAlpha": 0,
            "position": "left"
        ],
        "graphs": [
            "id": "g1",
            "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
            "bullet": "round",
            "bulletSize": 8,
            "lineColor": "#fe5d70",
            "lineThickness": 2,
            "negativeLineColor": "#fe9365",
            "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": "YYYY-MM-dd HH:mm:ss",
            "cursorAlpha": 0,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "valueLineAlpha": 0.5,
            "fullWidth": true
        ,
        "dataDateFormat": "YYYY-MM-DD JJ:NN:SS",
        "categoryField": "year",
        "categoryAxis": 
            "minPeriod": "hh",
            "parseDates": true,
            "gridAlpha": 0,
            "minorGridAlpha": 0,
            "minorGridEnabled": true
        ,
        "export": 
            "enabled": true
        
    );
    amchart.addListener("rendered", zoomChart);
    if (amchart.zoomChart) 
        amchart.zoomChart();
    

    function zoomChart() 
        amchart.zoomToIndexes(Math.round(amchart.dataProvider.length * 0.4), Math.round(amchart.dataProvider.length * 0.55));
    
);

数据：

var chartvalues = [
    
        "year": "2022-01-31 14:12:22",
        "value": 71
    ,
    
        "year": "2022-06-08 16:42:38",
        "value": 50
    ,
    
        "year": "2022-02-21 11:12:48",
        "value": 43
    ,
    
        "year": "2021-04-13 01:49:44",
        "value": 82
    ];

【参考方案1】：

AmCharts 期望基于日期时间的数据按升序排序 (v3 docs)。您需要修复数据顺序，否则将无法正确呈现。

var chartvalues = [
    "year": "2021-04-13 01:49:44",
    "value": 82
  , 
    "year": "2022-01-31 14:12:22",
    "value": 71
  ,
  
    "year": "2022-02-21 11:12:48",
    "value": 43
  ,
  
    "year": "2022-06-08 16:42:38",
    "value": 50
  ,
];

var amchart = AmCharts.makeChart("sales-analytics", 
  "type": "serial",
  "theme": "light",
  "marginTop": 0,
  "marginRight": 0,
  "dataProvider": chartvalues,
  "valueAxes": [
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
  ],
  "graphs": [
    "id": "g1",
    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
    "bullet": "round",
    "bulletSize": 8,
    "lineColor": "#fe5d70",
    "lineThickness": 2,
    "negativeLineColor": "#fe9365",
    "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": "YYYY-MM-dd HH:mm:ss",
    "cursorAlpha": 0,
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "valueLineAlpha": 0.5,
    "fullWidth": true
  ,
  "dataDateFormat": "YYYY-MM-DD JJ:NN:SS",
  "categoryField": "year",
  "categoryAxis": 
    "minPeriod": "hh",
    "parseDates": true,
    "gridAlpha": 0,
    "minorGridAlpha": 0,
    "minorGridEnabled": true
  ,
  "export": 
    "enabled": true
  
);
amchart.addListener("rendered", zoomChart);
if (amchart.zoomChart) 
  amchart.zoomChart();


function zoomChart() 
  amchart.zoomToIndexes(Math.round(amchart.dataProvider.length * 0.4), Math.round(amchart.dataProvider.length * 0.55));

<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="sales-analytics" style="width: 100%; height: 300px;"></div>