【问题标题】:Dates on xaxis with highchartsxaxis 上的日期与 highcharts
【发布时间】:2015-02-03 14:33:24
【问题描述】:

我需要在图表上的 xaxis 上显示日期。我通过一个范围日期选择器收集我的数据,用户可以在其中输入 14 天的范围。我需要 xaxis 上的第一个值作为范围的开始日期,最后一个值作为范围的结束日期。 我希望 xaxis 标签读取类似“2015 年 1 月 27 日”、“2015 年 1 月 28 日”或该方向的内容,并且每个 tic 为 1 天。我已经阅读了 API 文档,并且对图表的设置进行了很多尝试,但由于某种原因,我无法让它工作。

            $('#graphColumn').highcharts({
                title: {
                    text: '',
                    x: -20 //center
                },
                xAxis: {
                    categories: [dayArray[0], dayArray[1], dayArray[2], dayArray[3], dayArray[4], dayArray[5], dayArray[6], dayArray[7], dayArray[8], dayArray[9], dayArray[10], dayArray[11], dayArray[12], dayArray[13]]
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: ''
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                credits: {
                    enabled: false
                },
                series: [{
                    showInLegend: false,
                    name: ' ',
                    data: series,
                    color: '#77B7C5',
                    marker: {
                        symbol: 'circle'
                    }
                }, {
                    showInLegend: false,
                    name: '1 år sedan',
                    data: series1yearago,
                    color: "#71C73E",
                    marker: {
                        symbol: 'circle'
                    }
                }]
            });

这是我的图表。我知道 xaxis 现在已经设置了类别,但这只是暂时的,我知道它应该是日期时间。我的系列是常规的 int 数组,每个索引上有一个数字。我会感谢任何可以在这里提供的帮助!

编辑:这是一个有效的 jsfiddle 示例:http://jsfiddle.net/g0p00tLv/1

【问题讨论】:

    标签: javascript jquery highcharts


    【解决方案1】:

    您的数据及其格式是我们真正需要看到的。

    您需要做以下两件事之一:

    1) 将数据作为 [x,y] 对的数组传递,其中 x 是纪元时间戳(以毫秒为单位)或 date.UTC 对象

    2) 将数据作为 y 值的单个数组传递,并使用 pointStart 和 pointInterval 属性正确设置日期轴。

    参考:

    如果您需要更多信息,请设置一个有效的小提琴示例并将其发布在这里。

    【讨论】:

    • 感谢您的 cmets。我在描述中写道,我的系列是 int 数组,每个索引一个数字。无论如何,我做了一个jsfiddle,你可以看看。 jsfiddle.net/g0p00tLv
    • 我按照你的 #1 建议做了,并传递了一组 [x,y] 对,然后它就起作用了。
    猜你喜欢
    • 1970-01-01
    • 2016-03-19
    • 2018-05-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多