Question

我正在使用Amcharts来生成图表。图表的渲染效果很好，但是在鼠标悬停时，气球框将时间值显示为“ 24:05”，而不是“ 00:05”

我有这种格式的数据：

var chartData = [{
        "batchName":"abc",
        "expectedEndTime": "00:05",
        "actualEndTime": "00:05",
    },
     {
       "batchName":"cde",
        "expectedEndTime": "01:01",
        "actualEndTime": "02:02"
    },
    {
        "batchName":"def",
        "expectedEndTime": "00:48",
        "actualEndTime": "02:09"
    },
    ---------------
    ---------------

我所做的配置是：

"graphs": [{
               "lineAlpha": 0.9,
               "type": "line",
               "lineThickness": 1.5,
               "bullet": "round",
               "lineColor": "#0D338C",
               "bulletBorderColor": "#0D338C",
               "bulletBorderThickness": 0.2,
               "bulletBorderAlpha": 0.5,
               "valueField": "expectedEndTime",
               "title": "Expected End Time",            
               "dateFormat": "HH:NN",
               "labelPosition": "top",
               "labelColor": "red",
               "valueAxis": "v1",
               "labelText": "[[labelExpected]]",
               "balloonText": "Estimated End Time : <b>[[value]]</b>"
            },
           ---------------------------
           ---------------------------

这是我的 JSFiddle

任何建议将不胜感激。

Answer 1

AmCharts date format documentation似乎是向后的。尝试使用unicode获取日期格式。

这是他们的桌子。但是KK:NN和H似乎在您使用的版本中被交换了：

┌──────┬───┬──────┬────┬──────────────┐
│ hour │ h │ 1..2 │ 11 │ Hour [1-12]. │
│      │ H │ 1..2 │ 13 │ Hour [0-23]. │
│      │ K │ 1..2 │  0 │ Hour [0-11]. │
│      │ k │ 1..2 │ 24 │ Hour [1-24]. │
└──────┴───┴──────┴────┴──────────────┘

var chartData = [{"actualEndTime": "00:05", "batchName": "abc", "expectedEndTime": "00:05"}, {"actualEndTime": "02:02", "batchName": "cde", "expectedEndTime": "01:01"}, {"actualEndTime": "02:09", "batchName": "def", "expectedEndTime": "00:48"}, {"actualEndTime": "02:36", "batchName": "efg", "expectedEndTime": "00:54"}, {"actualEndTime": "02:46", "batchName": "fgh", "expectedEndTime": "01:35"}, {"actualEndTime": "04:36", "batchName": "ghi", "expectedEndTime": "03:15", "labelActual": "04:36", "labelExpected": "03:15"}, {"actualEndTime": "04:49", "batchName": "hij", "expectedEndTime": "05:00"}, {"actualEndTime": "05:09", "batchName": "ijk", "expectedEndTime": "05:18"}, {"actualEndTime": "06:10", "batchName": "jkl", "expectedEndTime": "05:30"}, {"actualEndTime": "04:32", "batchName": "klm", "expectedEndTime": "06:18", "labelActual": "04:32", "labelExpected": "06:18"}, {"actualEndTime": "06:00", "batchName": "lmn", "expectedEndTime": "06:00"}, {"actualEndTime": "06:17", "batchName": "mno", "expectedEndTime": "06:31"}, {"actualEndTime": "05:38", "batchName": "nop", "expectedEndTime": "05:41"}, {"actualEndTime": "05:32", "batchName": "opq", "expectedEndTime": "07:38"}, {"actualEndTime": "08:23", "batchName": "pqr", "expectedEndTime": "07:18", "labelActual": "08:23", "labelExpected": "07:18"}, {"actualEndTime": "07:32", "batchName": "qrs", "expectedEndTime": "08:00", "labelActual": "07:32", "labelExpected": "08:00"}, {"actualEndTime": "07:57", "batchName": "rst", "expectedEndTime": "07:04"}, {"actualEndTime": "08:58", "batchName": "stu", "expectedEndTime": "10:30"}, {"actualEndTime": "09:48", "batchName": "tuv", "expectedEndTime": "11:30"}, {"actualEndTime": "14:10", "batchName": "uvw", "expectedEndTime": "11:30", "labelActual": "14:10", "labelExpected": "11:30"}, {"actualEndTime": "14:52", "batchName": "vwx", "expectedEndTime": "11:30", "labelActual": "14:52", "labelExpected": "11:30"}];

AmCharts.makeChart("chartdiv", {
    "backgroundColor": 'blue',
    "theme": "light",
    "type": "serial",
    "zoomOutText": '',
    "color": "black",
    "dataDateFormat": "HH:NN",
    "legend": {
        "useGraphSettings": true
    },
    "dataProvider": chartData,
    "valueAxes": [{
        "id": "v1",
        "position": "left",
        "axisColor": "#472F52",
        "title": "Time of the Day",
        "type": "date",
        "axisThickness": 2,
        "markPeriodChange": false,
        "autoGridCount": false,
        "minimumDate": "00:00",
        "maximumDate": "23:00",
        "gridCount": 20,
        "minPeriod": "ss",
    }

    ],
    "startDuration": 1,
    "graphs": [{
        "lineAlpha": 0.9,
        "type": "line",
        "lineThickness": 1.5,
        "bullet": "round",
        "lineColor": "#0D338C",
        "bulletBorderColor": "#0D338C",
        "bulletBorderThickness": 0.2,
        "bulletBorderAlpha": 0.5,
        "valueField": "expectedEndTime",
        "title": "Expected End Time",
        "dateFormat": "KK:NN",
        "labelPosition": "top",
        "labelColor": "red",
        "valueAxis": "v1",
        "labelText": "[[labelExpected]]",
        "balloonText": "Estimated End Time : <b>[[value]]</b>"
    },
    {
        "lineAlpha": 0.9,
        "type": "line",
        "lineThickness": 1.5,
        "lineColor": "#C63F05",
        "bullet": "round",
        "bulletBorderColor": "#C63F05",
        "bulletBorderThickness": 0.2,
        "bulletBorderAlpha": 0.5,
        "valueField": "actualEndTime",
        "title": "Actual End Time",
        "dateFormat": "KK:NN",
        "labelPosition": "bottom",
        "labelColor": "blue",
        "valueAxis": "v1",
        "labelText": "[[labelActual]]",
        "balloonText": "Actual End Time : <b>[[value]]</b>"
    }
    ],
    "chartCursor": {
        "categoryBalloonDateFormat": "DD",
        "cursorAlpha": 0.1,
        "cursorColor": "#000000",
        "fullWidth": true,
        "valueBalloonsEnabled": true,
        "zoomable": false
    },
    "categoryField": "batchName",
    "categoryAxis": {
        "gridPosition": "start",
        "axisThickness": 2,
        "axisColor": "#472F52",
        "autoGridCount": false,
        "gridCount": 1000,
        "title": "Batches",
        "labelRotation": 30
    },
    "export": {
        "enabled": true,
        "borderRadius": "10px",
        "text-align": "center",
        "pdfMake": {
            "content": ["'<Name of the Metric to be displayed dynamically>'",
                "                     ", "from <startDate> To <endDate>", {
                    "image": "reference", //exported image
                    "fit": [523.28, 769.89]
                }
            ]
        },
        "legend": {
            "position": "bottom", // or "right", "bottom" and "left" are possible
            "width": 200, // optional
            "height": 200 // optional
        }
    }
});

#chartdiv {
  width: 100%;
  height: 275px;
}

Amcharts气球框将时间值显示为“ 24:05”，而不是“ 00:05”

1 个答案: