1

我已经使用 High Chart 成功创建了一个图表来比较患者的预期时间和到达时间。

但是，我现在遇到了label列的问题；这是显示时间milliseconds。

下面的屏幕截图显示了该问题：

在此处输入图像描述

如何更改标签以格式显示时间 (H:M:S)

代码：

<script type="text/javascript">
        function drawChart(){
            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'divforchart',
                    type:'column',
                },
                xAxis: {
                    name:'patients',
                    categories: [<?php
                    echo "'".$names[0]."'";
                    for($i = 1; $i < sizeof($names); $i++){
                        echo ",'".$names[$i]."'";
                    }
                    ?>]
                },
                yAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: { 
                        //force all formats to be hour:minute:second
                        second: '%H:%M:%S',
                        minute: '%H:%M:%S',
                        hour: '%H:%M:%S',
                        day: '%H:%M:%S',
                        week: '%H:%M:%S',
                        month: '%H:%M:%S',
                        year: '%H:%M:%S'
                    },
                    min: <?php echo "Date.UTC(".gmdate("Y,m,d,H",strtotime($minDate)).")";?>
                },

                series: [
                    {
                        name: 'Arrival time',
                        data: [<?php
                            echo "['".$names[0]."',Date.UTC(".gmdate("Y,m,d,H,i,s",strtotime($Arrival_time[0])).")]";
                            for($i = 1; $i < sizeof($names); $i++){
                                echo "
                                ,['".$names[$i]."',Date.UTC(".gmdate("Y,m,d,H,i,s",strtotime($Arrival_time[$i])).")]";
                            }
                        ?>]
                    },
                    {
                        name: 'Expected time',
                        data: [<?php
                            echo "['".$names[0]."',Date.UTC(".gmdate("Y,m,d,H,i,s",strtotime($Expected_time[0])).")]";
                            for($i = 1; $i < sizeof($names); $i++){
                                echo "
                                ,['".$names[$i]."',Date.UTC(".gmdate("Y,m,d,H,i,s",strtotime($Expected_time[$i])).")]";
                            }
                        ?>]
                    }
                ]
            });
        }
    </script>
    </head>
    <body onLoad="drawChart()">
     <div id="divforchart" style="height: 400px"></div>
    </body>
4

2 回答 2

2

尝试：

Highcharts.dateFormat(values)

见这里：http ://api.highcharts.com/highcharts#Highcharts.dateFormat%28%29

如果您想在系列中使用它，或者您可以更改工具提示。

series: [{
        dataLabels: {
            enabled: true,
            formatter:function() {
                return Highcharts.dateFormat('%H:%M:%S',this.y);
            },
            style:{color:"black"}
        },
        data: [data]
    }]

工具提示：

tooltip:{
    formatter:function() {
        return Highcharts.dateFormat('%H:%M:%S',this.y);
    }
}

您的代码必须如下所示：

chart: {
                    renderTo: 'divforchart',
                    type:'column',
                },
tooltip: { ...
于 2013-04-18T16:56:21.703 回答
1

从外观上看，您指的是工具提示，而不是 dataLabel。您可以使用 formatter 函数正确格式化日期：

http://api.highcharts.com/highcharts#tooltip.formatter

（如果您实际上是在谈论 dataLabel，您仍然可以做同样的事情：http: //api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter）

我认为默认值是 numberFormat y 轴值，但您将希望在格式化程序中使用 dateFormat 函数：

http://api.highcharts.com/highcharts#Highcharts.dateFormat%28%29

如果您需要帮助实现，请创建一个 jsfiddle ( http://jsfiddle.net/ ) 并回发

于 2013-04-18T17:00:24.200 回答