【问题标题】:Highchart - xAxis weekly date can start given day?Highchart - xAxis 每周日期可以从给定日期开始吗?
【发布时间】:2019-05-01 09:23:28
【问题描述】:

我有一个非常基本的“线”周日期图形。我只需要 x 轴上的日期来开始我第一点的给定日期。我已指定 pointStart: Date.UTC(2018, 09, 25) 但它显示不同月份的不同周?如何在 x 轴上显示从给定日期开始的星期?

$('#container').highcharts({
            chart: {
                type: 'line'
            },
            credits : {
              enabled : false
            },
            title: {
                text: false
            },
            xAxis: {  
                tickInterval:  7 * 24 * 3600 * 1000,
                type: 'datetime',
                startOnTick: true,
                startOfWeek: 0,
                labels: {
                    format: '{value:%d/%m/%Y}',
                    rotation: -45,
                    y: 30,
                    align: 'center'
                } 
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'HH'
                }
            },
            plotOptions: {
                series: {
                    pointStart: Date.UTC(2018, 09, 25),
                    pointInterval: 7 * 24 * 3600 * 1000
                }
            }, 
            series: [
                {
                    name: 'Curva Tardía',
                    data: [18, 27, 36, 36, 10]
                }, {
                    name: 'Curva Temprana',
                    data: [9, 18, 27, 27, 90]
                },{
                    name: 'Curva Real',
                    data: [0, 36, 45, 89, 100] 
                }
            ]
        });

【问题讨论】:

    标签: charts highcharts


    【解决方案1】:

    容易出错,在Date.UTC中,月份是从0开始的索引,这意味着用09初始化函数意味着它将月份设置为10月而不是9月。

    通过设置Date.UTC(2018, 08, 25),您将获得您希望到达的日期:

    $('#container').highcharts({
                chart: {
                    type: 'line'
                },
                credits : {
                  enabled : false
                },
                title: {
                    text: false
                },
                xAxis: {  
                    tickInterval:  7 * 24 * 3600 * 1000,
                    type: 'datetime',
                    startOnTick: true,
                    startOfWeek: 0,
                    labels: {
                        format: '{value:%d/%m/%Y}',
                        rotation: -45,
                        y: 30,
                        align: 'center'
                    } 
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'HH'
                    }
                },
                plotOptions: {
                    series: {
                        pointStart: Date.UTC(2018, 08, 25),
                        pointInterval: 7 * 24 * 3600 * 1000
                    }
                }, 
                series: [
                    {
                        name: 'Curva Tardía',
                        data: [18, 27, 36, 36, 10]
                    }, {
                        name: 'Curva Temprana',
                        data: [9, 18, 27, 27, 90]
                    },{
                        name: 'Curva Real',
                        data: [0, 36, 45, 89, 100] 
                    }
                ]
            });
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    【讨论】:

    • 有没有什么方法可以根据周日期绘制 x 轴,而不用相加 7 天的间隔?
    • 并非如此,您仅有的两个选择是:您已经完成了指定点的间隔,或者给每个点一个手动值(您仍然需要使用上述计算公式)。
    【解决方案2】:

    你需要使用startOfWeek选项:

    xAxis: {
        startOfWeek: 4
    }
    

    现场演示:http://jsfiddle.net/BlackLabel/nL4vuz5f/

    API:https://api.highcharts.com/highcharts/xAxis.startOfWeek

    【讨论】:

    • 谢谢@ppotaczek 非常需要这个。
    • 嗨@Pradam,我很高兴能帮上忙。你可以接受答案。
    猜你喜欢
    • 1970-01-01
    • 2020-03-24
    • 1970-01-01
    • 2017-07-19
    • 1970-01-01
    • 1970-01-01
    • 2013-01-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多