Google折線圖-v和f屬性設置

Question

我試圖讓我的折線圖將工具提示中的結果顯示為字符串格式（例如：2015年6月28日至2015年7月4日），同時讓我的hAxis將其值顯示為日期格式（例如：Jun 29） 。

與Analytics（分析）類似：

但是，當我使用返回的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
        }]
    }]
}

我的圖表顯示了具有f屬性值而不是v屬性值的hAxis，如下所示：

hAxis的數據類型設置為string 。
憑所提供的信息，請問我如何能達到預期的效果？

Answer 1

您是否嘗試設置'options' -> 'vAxis' -> 'ticks'參數？

然后您的json數據將如下所示：

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

這是折線圖上Google圖表文檔的鏈接 ，我希望這會有所幫助:-)

編輯：

這是一個工作的jsfiddle 。 我不知道您使用什么方法加載數據，但這對我有用。

由於某些原因，在選項中設置width和height參數后，標簽顯示正確。

Answer 2

基於@ bjarkig82提供的有效jsfiddle。 我已經想到了如何解決該問題並實現我的目標。

首先，列日期的數據類型需要從字符串更改為日期

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