Question

我已使用高图表成功创建了一个图表来比较预期的时间和病人到达时间。

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

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

enter image description here

如何更改标签以格式显示时间（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>

Answer 1

尝试：

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: { ...

Answer 2

从表面上看，您指的是工具提示，而不是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/）并回发

如何使用Highcharts更改工具提示

2 个答案: