在谷歌图表中设置工具提示数据的格式

Question

>我有一个页面 http://goodandevilbook.com/stats，我正在使用谷歌图表显示数据。

在

其中一个图表（面积图）上 当我将鼠标悬停在工具提示上时，它会以难以阅读的格式显示日期。我想将此日期格式化为更具可读性的方式。此外，工具提示显示 ga：visits，我想将其更改为仅访客。我无法真正将 JSON 文件数据转换为所需的格式，因为它是自动生成的

不知何故，我需要在收到这些数据后更改它。这是我生成面积图的代码：

google.setOnLoadCallback(drawGraph);
function drawGraph(){
    var graph = new google.visualization.ChartWrapper({
    "containerId":"last30chart",
    "dataSourceUrl":"http://good-and-evil-stats.appspot.com/query?id=ahVzfmdvb2QtYW5kLWV2aWwtc3RhdHNyFQsSCEFwaVF1ZXJ5GICAgICA14wKDA&format=data-table-response",
        "refreshInterval":0,
         "chartType":"AreaChart",
            "options":{
                "width":675,
                "height":400,
                "chartArea":{width:"95%", height:"83%"},
                "areaOpacity":0.1,
                "pointSize":4,
                "backgroundColor":"transparent",
                "colors":['#76BB72'],
                "legend":{position: 'none'},
                "tooltip":{textStyle: {fontSize:18}},
                "hAxis":{textPosition:"none", gridlines: {color: 'red', count: 7}},
                "dateFormat":{formatType: "long"}
            }
            });
    graph.draw();}

我尝试插入用于格式化日期的代码。

https://developers.google.com/chart/interactive/docs/reference#dateformatter

这就是我正在玩的：

var monthYearFormatter = new google.visualization.DateFormat({ 
     pattern: "MMM yyyy" 
}); 
monthYearFormatter.format(dataSourceUrl);

我已经尝试了一段时间，但无法让它工作。我是Javascript/jquery的新手，所以不太确定我在做什么。

Answer 1

使用 ChartWrapper 对象的 dataSourceUrl 参数拉入数据时，无法设置数据的格式。 您必须切换到使用 Query 对象，然后才能根据需要设置数据格式并更改列标签。 由于日期实际上是字符串而不是 Date 对象，因此必须先使用 DataView 将它们转换为 Date 对象，然后才能设置它们的格式。 下面是一个示例：

function drawGraph(){
    var query = new google.visualization.Query("http://good-and-evil-stats.appspot.com/query?id=ahVzfmdvb2QtYW5kLWV2aWwtc3RhdHNyFQsSCEFwaVF1ZXJ5GICAgICA14wKDA&format=data-table-response");
    query.send(function (response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        var data = response.getDataTable();
        // set the label of column 1 to "Visitors"
        data.setColumnLabel(1, 'Visitors');
        // create a formatter for the dates
        var formatter = new google.visualization.DateFormat({pattern: "MMM yyyy"});
        var graph = new google.visualization.ChartWrapper({
            "containerId": "last30chart",
            "chartType":"AreaChart",
            dataTable: data,
            "options": {
                "width":675,
                "height":400,
                "chartArea": {width:"95%", height:"83%"},
                "areaOpacity":0.1,
                "pointSize":4,
                "backgroundColor":"transparent",
                "colors":['#76BB72'],
                "legend":{position: 'none'},
                "tooltip":{textStyle: {fontSize:18}},
                "hAxis":{textPosition:"none", gridlines: {color: 'red', count: 7}},
                "dateFormat":{formatType: "long"}
            },
            view: {
                columns: [{
                    type: 'date',
                    label: data.getColumnLabel(0),
                    calc: function (dt, row) {
                        var dateStr = dt.getValue(row, 0);
                        var year = parseInt(dateStr.substring(0, 4), 10);
                        var month = parseInt(dateStr.substring(4, 6), 10) - 1; // convert month to 0-based index
                        var day = parseInt(dateStr.substring(6, 8), 10);
                        var date = new Date(year, month, day);
                        return {v: date, f: formatter.formatValue(date)};
                    }
                }, 1]
            }
        });
        graph.draw();
    });
}