Question

在上午图表中，我在用户轴列表中将用户列为类别和持续时间（hh：mm：ss）。我已将网格数设置为24，但是它没有按预期工作（1小时* 24步）。它设定为2000秒的步骤。我尝试改变了很多参数。

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

此处，在24个网格的1小时拆分中，分割的持续时间不能按预期工作。我的输入数据只需几秒钟。

有什么建议吗？

Answer 1

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

您好，

不幸的是，你需要的东西是不可能实现的   实时编辑，由于它的一些限制。

但是，可以使用amCharts。

我在这里做了必要的修改：

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
    }
]
});

有很多变化：

1）从值轴中删除持续时间，并设置其类型：＆＃34; date;

2）使数据中的值非字符串（删除它们周围的引号）并转换   到毫秒，因为JavaScript以毫秒为单位;

3）同样，将valueAxis中的最大值转换为毫秒;

4）为valueAxis设置以下两个设置:(这样它就不会尝试   格式化第一个小时不同）

＆＃34; boldPeriodBeginning＆＃34;：false，＆＃34; markPeriodChange＆＃34;：false

5）最后，在图表代码之前设置AmCharts.useUTC = false。（这确保了   时间戳没有重新计算到本地时区）

我希望你觉得这很有用。

您诚挚的，
     Martynas Majeris

amCharts

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

1 个答案: