Highcharts：如何格式化 x 軸，以便每個 y 出現表中的實際日期/時間

Question

Highcharts 菜鳥在這里，取得了一些進展。
使用 HC 的一個基本示例，我可以部分工作，但是：
a) 如何格式化 x 軸，以便表格中的實際日期/時間出現在每個 y 上？
b）如何在工具提示中顯示該日期？
SO告訴我我試圖在這里粘貼太多代碼而沒有足夠的討論，所以我把它全部放在了jsfiddle上。 （抱歉，如果我還沒有學會如何在發帖中解決這個問題。）

僅 highcharts js 的部分代碼； 數據表&html可以在小提琴上看到：

<html>
<head>
(snip: see fiddle for all the JS headers)
<script type="text/javascript">
        $(function() {
            Highcharts.chart('container', {
                data: {
                    table: document.getElementById('datatable'),
                    startRow: 0,
                    endRow: 10
                },              
                chart: {
                    type: 'spline'
                },
                xAxis: {
                    type: 'datetime',
                    labels: {
                    formatter: function() {
                    return Highcharts.dateFormat('%a, %e-%b; %H:%M', this.value);
                      }
                    }
                  },
                title: {
                    text: 'Tides for: Cundy Harbor, New Meadows River, Casco Bay, Maine'
                },
                yAxis: {
                    title: {
                      text: 'Height of tide<br>in feet.'
                        },
                        gridLineColor: '#197F07',
                        gridLineWidth: 0,
                        lineWidth:1,
                        plotLines: [{
                            color: '#FF0000',
                            width: 1,
                            value: 0
                    }]
                },
                tooltip: {
                    formatter: function() {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.point.y + ' ft.<br>' + this.point.name;
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div id="container" style="width: 100%; height: 400px;"> </div>
<div>
    <table id="datatable">
        <thead>
            <tr>
                <th>Test</th>
                <th>Height of Tide</th>
            </tr>
        </thead>
        <tbody>
<tr><th>Monday, Sep 23 2019 18:32</th><td>9.4</td></tr>
<tr><th>Tuesday, Sep 24 2019 01:01</th><td>0.5</td></tr>
<tr><th>Tuesday, Sep 24 2019 07:20</th><td>8.3</td></tr>
<tr><th>Tuesday, Sep 24 2019 13:17</th><td>1.0</td></tr>
<tr><th>Tuesday, Sep 24 2019 19:38</th><td>9.7</td></tr>
<tr><th>Wednesday, Sep 25 2019 02:05</th><td>0.1</td></tr>
<tr><th>Wednesday, Sep 25 2019 08:24</th><td>8.8</td></tr>
<tr><th>Wednesday, Sep 25 2019 14:21</th><td>0.6</td></tr>
<tr><th>Wednesday, Sep 25 2019 20:41</th><td>10.1</td></tr>
<tr><th>Thursday, Sep 26 2019 03:05</th><td>-0.4</td></tr>
<tr><th>Thursday, Sep 26 2019 09:22</th><td>9.4</td></tr>
        </tbody>
    </table>
</div>
</body>
</html>
``

[jsfiddle here][1]

  [1]: https://jsfiddle.net/splobsterman/nzd851au/5/

Answer 1

在您的情況下， category軸類型似乎是一個更好的選擇：

xAxis: {
    type: 'category'
}

現場演示： http://jsfiddle.net/BlackLabel/1qv5b48o/

API 參考： https://api.highcharts.com/highcharts/xAxis.type

Highcharts：如何格式化 x 軸，以便每個 y 出現表中的實際日期/時間

問題描述

1 個解決方案

解決方案1
1 已采納 2019-10-07 11:15:00

Highcharts：如何格式化 x 軸，以便每個 y 出現表中的實際日期/時間

問題描述

1 個解決方案

解決方案1 1 已采納 2019-10-07 11:15:00

解決方案1
1 已采納 2019-10-07 11:15:00