Google 折线图 - v 和 f 属性设置

Question

我正在尝试让我的折线图在工具提示中以 字符串格式显示结果（例如：2015 年 6 月 28 日 - 2015 年 7 月 4 日） 同时使用我的 hAxis将其值显示为 日期格式（例如：Jun 29）.

类似于分析：

然而，当我使用返回的 Json 数据绘制图表时，如下所示：

{
    "cols": [{
        "id": "A",
        "label": "Date Range",
        "pattern": "",
        "type": "string"
    }, {
        "id": "B",
        "label": "Sessions",
        "pattern": "",
        "type": "number"
    }, {
        "id": "C",
        "label": "Pageviews",
        "pattern": "",
        "type": "number"
    }],
    "rows": [{
        "c": [{
            "v": "Date(2015,5,23)",
            "f": "Jun 23, 2015 - Jun 27, 2015"
        }, {
            "v": 1645
        }, {
            "v": 5237
        }]
    }, {
        "c": [{
            "v": "Date(2015,5,28)",
            "f": "Jun 28, 2015 - Jul 04, 2015"
        }, {
            "v": 2189
        }, {
            "v": 6977
        }]
    }, {
        "c": [{
            "v": "Date(2015,6,05)",
            "f": "Jul 05, 2015 - Jul 11, 2015"
        }, {
            "v": 2168
        }, {
            "v": 6862
        }]
    }, {
        "c": [{
            "v": "Date(2015,6,12)",
            "f": "Jul 12, 2015 - Jul 18, 2015"
        }, {
            "v": 1661
        }, {
            "v": 5735
        }]
    }, {
        "c": [{
            "v": "Date(2015,6,19)",
            "f": "Jul 19, 2015 - Jul 23, 2015"
        }, {
            "v": 1109
        }, {
            "v": 3826
        }]
    }]
}

我的图表显示的 hAxis 具有 f 属性的值而不是 v 属性的值，如下所示：

hAxis 的数据类型设置为 string.
有了这些信息，请问如何才能达到我想要的效果？

Answer 1

您是否尝试设置 'options' -> 'vAxis' -> 'ticks' 参数？

那么您的 json 数据将如下所示：

{
  "cols": [your columns],
  "rows": [your rows],
  "options": {
     "vaxis": {
       "ticks": ["jun 29", "jul 6", "jul 13"]
     }
   }
}

Here's a link to google charts documentation on line charts，我希望这有帮助:-)

编辑：

Here's a working jsfiddle。我不知道您使用什么方法加载数据，但这对我有用。

由于某些原因，我在选项中设置了宽度和高度参数后，标签显示正确。

Answer 2

基于@bjarkig82 提供的工作 jsfiddle。我已经想好如何解决这个问题并实现我的 objective.

首先，日期列的数据类型需要从string更改为date

var cols = [{
        "id": "A",
            "label": "Date Range",
            "pattern": "",
            "type": "date"
    }, {
        "id": "B",
            "label": "Sessions",
            "pattern": "",
            "type": "number"
    }, {
        "id": "C",
            "label": "Pageviews",
            "pattern": "",
            "type": "number"
    }];

    var rows = [{
        "c": [{
            "v": "Date(2015,5,23)",
                "f": "Jun 23, 2015 - Jun 27, 2015"
        }, {
            "v": 1645
        }, {
            "v": 5237
        }]
    }, {
        "c": [{
            "v": "Date(2015,5,28)",
                "f": "Jun 28, 2015 - Jul 04, 2015"
        }, {
            "v": 2189
        }, {
            "v": 6977
        }]
    }, {
        "c": [{
            "v": "Date(2015,6,05)",
                "f": "Jul 05, 2015 - Jul 11, 2015"
        }, {
            "v": 2168
        }, {
            "v": 6862
        }]
    }, {
        "c": [{
            "v": "Date(2015,6,12)",
                "f": "Jul 12, 2015 - Jul 18, 2015"
        }, {
            "v": 1661
        }, {
            "v": 5735
        }]
    }, {
        "c": [{
            "v": "Date(2015,6,19)",
                "f": "Jul 19, 2015 - Jul 23, 2015"
        }, {
            "v": 1109
        }, {
            "v": 3826
        }]
    }];

其次，我注释了下面显示的代码部分，否则它将导致我的 字符串日期（例如：2015 年 6 月 28 日 - 2015 年 7 月 4 日） 显示为 日期（例如：2015 年 6 月 28 日） 在工具提示中。

var formatter = new google.visualization.DateFormat({ pattern: "EEEE, MMM dd, yyyy" });
formatter.format(data, 0);

为了更好地理解，请查看此 jsfiddle

Google 折线图 - v 和 f 属性设置

Google Line Chart - v and f properties settings

php

json

linechart

google-visualization