如何在Highcharts折线图X轴展示单日期对应多值的选定日期

直接用以下代码就能实现需求，关键配置及说明如下：

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts 指定日期折线图</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="width: 800px; height: 400px;"></div>

    <script>
        // 你的原始数据
        const date = ['2022-01-02', '2022-01-07', '2022-01-10'];
        const Data = [[1,2,3],[3,5,4],[6,3,4]];

        // 构建折线系列，每条子数组对应一条折线
        const series = Data.map((data, index) => ({
            name: `系列${index + 1}`,
            data: data,
            type: 'line'
        }));

        Highcharts.chart('container', {
            title: {
                text: '指定日期折线图'
            },
            xAxis: {
                type: 'category',
                categories: date, // 绑定指定日期数组，仅显示这些日期
                tickmarkPlacement: 'on',
                title: {
                    text: '日期'
                }
            },
            yAxis: {
                title: {
                    text: '数值'
                }
            },
            series: series
        });
    </script>
</body>
</html>

核心配置说明 #

• X轴日期控制：将xAxis.type设为'category'，并把你的date数组赋值给categories，X轴就只会显示你指定的日期
• 多组数据映射：通过遍历Data数组，把每个子数组转换成独立的折线系列，可自定义系列名称
• 样式扩展：如果需要调整折线颜色、线宽等样式，直接在每个series对象中添加color、lineWidth等属性即可

内容的提问来源于stack exchange，提问作者Shubham