AM 图表 - 持续时间在 y 轴上分开

Question

在 am 图表中，我将用户列为值轴图中的类别和持续时间 (hh:mm:ss)。我已将网格数设置为 24，但它没有按预期工作（1 小时 * 24 步）。它被设置为 2000 秒步。我试着改变了很多参数。

我的示例数据：https://live.amcharts.com/iMWNh/

在这里，在 24 个网格的 1 小时拆分中，持续时间拆分未按预期工作。我的输入数据以秒为单位。

有什么建议吗？

Answer 1

这对我有帮助！希望有人觉得有用。

Hi,

Unfortunately, what you require would be impossible to implement using Live Editor, due to some of its limitation.

However, it's possible using amCharts.

I have made necessary changes here:

https://codepen.io/team/amcharts/pen/55fe695a57e33657e9d5feb33423d481?editors=0010

AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"categoryField": "category",
"rotate": true,
"startDuration": 1,
"backgroundAlpha": 0.8,
"categoryAxis": {
    "gridPosition": "start"
},
"trendLines": [],
"graphs": [
    {
        "balloonText": "[[title]] of [[category]]:[[value]]",
        "fillAlphas": 1,
        "id": "AmGraph-1",
        "title": "Online(secs)",
        "type": "column",
        "valueField": "Online(sec)"
    },
    {
        "balloonText": "[[title]] of [[category]]:[[value]]",
        "fillAlphas": 1,
        "id": "AmGraph-2",
        "title": "Offline(secs)",
        "type": "column",
        "valueField": "Offline(sec)"
    }
],
"guides": [],
"valueAxes": [
    {
        "id": "ValueAxis-1",
        "maximum": 86400000,
        "stackType": "regular",
        "strictMinMax": true,
        "autoGridCount": false,
        "autoRotateCount": 0,
        "gridCount": 24,
        "labelRotation": 50.4,
        "title": "",
        "titleRotation": 0,
  "type": "date",
  "minPeriod": "hh",
  "boldPeriodBeginning": false,
  "markPeriodChange": false
    }
],
"allLabels": [],
"balloon": {},
"legend": {
    "enabled": true,
    "useGraphSettings": true
},
"titles": [
    {
        "id": "Title-1",
        "size": 15,
        "text": "Chart Title"
    }
],
"dataProvider": [
    {
        "category": "Diana",
        "Online(sec)": 7200000,
        "Offline(sec)": 79200000
    },
    {
        "category": "Clarke",
        "Online(sec)": 18000000,
        "Offline(sec)": 68400000
    },
    {
        "category": "Bruce",
        "Online(sec)": 3600000,
        "Offline(sec)": 7200000
    }
]
});

There were quite a few changes:

1) Remove the duration from value axis, and set its type: "date;

2) Make values in data non-string (remove quotes around them) and convert to milliseconds, since JavaScript deals in milliseconds;

3) Similarly convert maximum in valueAxis to milliseconds as well;

4) Set the following two settings for valueAxis: (so that it does not try to format the first hour differently)

"boldPeriodBeginning": false, "markPeriodChange": false

5) Finally, set AmCharts.useUTC = false before chart code. (this ensures that timestamps are not being recalculated to local time zone)

I hope you find this useful.

Yours sincerely,

Martynas Majeris

amCharts

AM 图表 - 持续时间在 y 轴上分开

AM charts - duration split up in y axis

amcharts