谷歌折线图 - v 和 f 属性设置答案

【问题标题】：Google Line Chart - v and f properties settings谷歌折线图 - v 和 f 属性设置
【发布时间】：2015-07-23 08:59:38
【问题描述】：

我试图让我的折线图在工具提示中以 字符串格式显示结果（例如：2015 年 6 月 28 日 - 2015 年 7 月 4 日），同时让我的 hAxis 将其值显示为日期格式（例如：6 月 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。
有了所提供的信息，请问我怎样才能达到我想要的结果？

【问题讨论】：

标签： php json google-visualization linechart

【解决方案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。我不知道您使用什么方法来加载数据，但这对我有用。

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

【讨论】：

感谢您的帮助。是的，我在 vAxis 和 hAxis 上都试过了，但它们都不起作用。以下是我尝试过的格式列表。 - - var options = { hAxis: { ticks: //[new Date(2015,5,23), new Date(2015,5,28), new Date(2015,6,05), new Date(2015,6,12)] //["Date(2015,5,23)","Date(2015,5,28)","Date(2015,6,05)","Date(2015,6,12)"] //["Jun 23","Jun 28","Jul 05","Jul 12"] }, };
我创建了一个工作 jsfiddle 并编辑了我的答案。试试看:-)
谢谢。根据您的代码，我已经找出导致问题的原因。

【解决方案2】：

基于@bjarkig82 提供的工作jsfiddle。我已经想出了如何解决这个问题并实现我的目标。

首先，需要将列日期的数据类型从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 日） 显示为 日期（例如：6 月 28 日， 2015) 在工具提示中。

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

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

【讨论】：