HIGHCHARTS点今天的日期

Highcharts 是一个流行的 JavaScript 图表库，用于创建交互式的图表。要在 Highcharts 中突出显示今天的日期，可以通过以下步骤实现：

基础概念

Highcharts: 一个基于 SVG 的 JavaScript 图表库，用于创建各种类型的图表，如折线图、柱状图、饼图等。
日期处理: 在 JavaScript 中，通常使用 Date 对象来处理日期和时间。

类型与应用场景

类型: 折线图、柱状图、饼图、散点图等。
应用场景: 数据分析、财务报告、市场研究、项目管理等。

实现步骤

以下是一个简单的示例代码，展示如何在 Highcharts 中突出显示今天的日期：

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts Today's Date Highlight</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="width: 100%; height: 400px;"></div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const today = new Date();
            const todayDate = today.toISOString().split('T')[0]; // YYYY-MM-DD format

            Highcharts.chart('container', {
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Highlight Today\'s Date'
                },
                xAxis: {
                    type: 'datetime',
                    labels: {
                        formatter: function () {
                            return Highcharts.dateFormat('%Y-%m-%d', this.value);
                        }
                    }
                },
                series: [{
                    data: [
                        { x: Date.UTC(2023, 9, 1), y: 10 },
                        { x: Date.UTC(2023, 9, 2), y: 15 },
                        { x: Date.UTC(2023, 9, 3), y: 12 },
                        { x: Date.UTC(2023, 9, 4), y: 18 },
                        { x: Date.UTC(2023, 9, 5), y: 20 },
                        { x: Date.UTC(2023, 9, 6), y: 22 },
                        { x: Date.UTC(2023, 9, 7), y: 25 }
                    ],
                    marker: {
                        enabled: true,
                        radius: 5
                    }
                }],
                plotOptions: {
                    series: {
                        point: {
                            events: {
                                mouseOver: function () {
                                    if (Highcharts.dateFormat('%Y-%m-%d', this.x) === todayDate) {
                                        this.series.chart.tooltip.refresh(this);
                                    }
                                }
                            }
                        }
                    }
                },
                tooltip: {
                    formatter: function () {
                        return `<b>Date:</b> ${Highcharts.dateFormat('%Y-%m-%d', this.x)}<br><b>Value:</b> ${this.y}`;
                    }
                }
            });
        });
    </script>
</body>
</html>