在按 flot 绘制的图表 sx 轴上看不到年份

发布于 2024-11-25 16:44:04 字数 1409 浏览 0 评论 0原文

感谢那些查看这篇文章的人,我想发布一些我的发现的更新: 这是我的 javascript,使用 flot 在页面上绘制图表,

        var dataSet1 = [[1249102800000, 34.50553], [1249189200000, 27.014463], [1249275600000, 26.7805], [1249362000000, 33.08871], [1249448400000, 51.987762], [1249534800000, 56.868233]];
        var dataSet2 = [[1249102800000, 3.405], [1249189200000, 2.701], [1249275600000, 2.678], [1249362000000, 3.308], [1249448400000, 5.187], [1249534800000, 5.668]];

        function doPlot(position) {
            $.plot($("#placeholder"),
                [{ data: dataSet1, label: "Data Set 1" },
                    { data: dataSet2, label: "Data Set 2", yaxis: 2}],
            {
                series: {
                    lines: { show: true },
                    points: { show: true }
                },
                grid: {
                    hoverable: true,
                    clickable: true
                },
                xaxes: [{ mode: 'time',
                    timeFormat: "%d-%m-%y",
                    minTickSize: [1, 'day']
                }],
                yaxes: [{ min: 0 },
                    {
                        alignTicksWithAxis: position == "right" ? 1 : null,
                        position: position
                    }],
                legend: { position: 'sw' }
            });

现在我能够获取图表 x 轴上的日期和月份,但仍然不是年份,看起来像 timeFormat: "%d-%m- %y”没有任何影响。又有人有什么想法吗?

Thanks for those who looked at this post and i would like to post some update with my findings:
This is my javascript to plot a graph on a page by using flot,

        var dataSet1 = [[1249102800000, 34.50553], [1249189200000, 27.014463], [1249275600000, 26.7805], [1249362000000, 33.08871], [1249448400000, 51.987762], [1249534800000, 56.868233]];
        var dataSet2 = [[1249102800000, 3.405], [1249189200000, 2.701], [1249275600000, 2.678], [1249362000000, 3.308], [1249448400000, 5.187], [1249534800000, 5.668]];

        function doPlot(position) {
            $.plot($("#placeholder"),
                [{ data: dataSet1, label: "Data Set 1" },
                    { data: dataSet2, label: "Data Set 2", yaxis: 2}],
            {
                series: {
                    lines: { show: true },
                    points: { show: true }
                },
                grid: {
                    hoverable: true,
                    clickable: true
                },
                xaxes: [{ mode: 'time',
                    timeFormat: "%d-%m-%y",
                    minTickSize: [1, 'day']
                }],
                yaxes: [{ min: 0 },
                    {
                        alignTicksWithAxis: position == "right" ? 1 : null,
                        position: position
                    }],
                legend: { position: 'sw' }
            });

now i am able to get the day and month on the x axis of the graph, but still not years, looks like the timeFormat: "%d-%m-%y" does not have any impacts. Again anyone has any thoughts??

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

顾铮苏瑾 2024-12-02 16:44:04

有点失望的是这里没有人给我提示,但我当然完全理解,因为没有人知道一切。

最后我通过自己的效果修复了它,我想在这里分享我的发现,希望可以使其他人受益,在这里:

我需要编写一个函数来格式化日期,这就是函数,

function dateFormatter(v) {
            return (new Date(v).toLocaleDateString());
        }

这是 x调用该函数的轴:

xaxes: [{ mode: 'time',
                    tickFormatter: dateFormatter,
                    minTickSize: [1, 'day']
                }],

它确实实现了我所需要的,尽管它并不完美,因为日期是这样的:2009年8月2日星期日,但我实际上想要的是2009年8月2日,尽管如此,这一个:8月2日星期日2009年,也达到了目的。

a bit disappointed that no one in here gives me a hint, but of course i fully understand since no one knows everything.

Finally i fixed it by my own effect, and i would like to share my finding in here and hopefully can benefit other folks, here you go:

I need to write a function to format the date, and this is the function

function dateFormatter(v) {
            return (new Date(v).toLocaleDateString());
        }

this is the x axis that calls that function:

xaxes: [{ mode: 'time',
                    tickFormatter: dateFormatter,
                    minTickSize: [1, 'day']
                }],

it does achieve what i needed though it is not perfect since the date is like this: Sunday, 2 August 2009, but what i want actually is Aug 2 2009, nevertheless, thsi one: Sunday, 2 August 2009, serves the purpose too.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文