【问题标题】:Highcharts - format date for x-axis as well as autoscale (data from mysql)Highcharts - x 轴的格式日期以及自动缩放(来自 mysql 的数据)
【发布时间】:2013-06-06 14:59:49
【问题描述】:

我做了很多研究,但我不确定我错过了什么。我有一个从 mysql 数据库构建的图表,并且我有一个日期被拉入以显示在 x 轴上。但是,我不仅希望日期的格式不同,而且我希望它在图表宽度发生类似变化时自动缩放......

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/type-datetime/

当您缩小屏幕时,图表会分别自动缩小 x 轴(即仅显示 2 天的刻度间隔而不是 1),日期也显示为 1.Jan 2.Jan 3.Jan。

在我的图表中,日期是按月-日-年自动格式化的,这绝对令人困惑。它还显示每天的每个刻度,这使 x 轴变得混乱。

这是我所拥有的,但它似乎不起作用....

        var options = {
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'line',
            },
            title: {
                text: 'Instance Types per Customer'
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    day: '%m-%d'
                },
                tickInterval: 24 * 3600 * 1000
            },
            yAxis: {
                title: {
                    text: 'Cost ($)'
                },
            },
            series: [{
            }]
        }

我设法让它工作而不是 dateTimeLabelFormats

               labels: {
                    formatter: function() {
                        var displayDate = Highcharts.dateFormat('%m/%d', this.value);
                        return displayDate; 
                    }
                }

我的第一个问题是日期没有以毫秒为单位格式化,在 data.php 中转换为毫秒后,我设法让工具提示识别它是日期格式,但是我无法获得内置dateTimeLabelFormats 函数来自 highcharts,因此如果有人对如何使其工作有任何建议,将不胜感激。显示设置为上个月的天数。

我会尝试在小提琴中重建,但从未使用过该工具。对highcharts非常陌生。

【问题讨论】:

  • 抱歉,您想达到什么目的?您链接的小提琴似乎非常合适,我看不到任何 x 轴杂乱无章...请突出问题。
  • 我是说工作正常,我的不行....我的 x 轴被所有拉入的日期阻塞。我希望它在图表缩小了。
  • 那么也许用你的实际数据创建一个小提琴会更相关:)
  • 我刚刚尝试创建我的第一个小提琴来向您展示我想要做什么,所有结果都是“ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”我已经从我能看到的正确方式加载了所有内容。我会坚持下去的。
  • jsfiddle.net/danlawless/q2gw4/15 not working 不确定是什么问题,我想它与外部 json 数据源有关,但我上传了。

标签: php mysql highcharts


【解决方案1】:

所以事实证明我的问题实际上是我通过 json 引入数据,并且需要以非常具体的方式形成 highcharts 的日期。它需要形成的方式在下面的这篇文章中得到了很好的阐述

Highcharts data series issue with ajax/json and PHP

我还没有找到如何为日期进行自动缩放,但这是两个问题中较大的一个。希望这对人们有所帮助。

【讨论】:

  • 为什么日期需要配置为“[Date.UTC(2011,11,08), 4]” 为什么我不能直接格式化发送到highcharts为毫秒时间?
  • docs.highcharts.com/#preprocessing-live-data 这只是 json 的一部分,其日期格式与预处理文档解释如何 [[1367208000000,52]、[1367294400000,13]、[1367380800000,83]、 [1367467200000,84],[1367553600000,0],[1367640000000,11],[1367726400000,95],[1367812800000,37],[1367899200000,93]] 这也不适用于 dateTimeLabelFormats。
  • 另一种方法是使用 tsv 格式化日期,然后传递然后格式化它,一旦你正确解析了日期并且不输入 tickeInterval,自动调整大小就会自动发生。按照此链接使其与 tsv blueflame-software.com/blog/using-highcharts-with-php-and-mysql 一起使用
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-01-20
  • 1970-01-01
相关资源
最近更新 更多