javascript - 设置 Google 图表中工具提示数据的格式

Question

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

在其中一个图表(面积图)上，当我将鼠标悬停在工具提示上时，它以难以阅读的格式显示日期。我想将此日期格式化为更易读的方式。另外，工具提示显示 ga:visitors，我想将其更改为仅visitors。我无法真正将 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 参数提取数据时，无法格式化数据。您必须切换到使用查询对象，然后您可以根据需要格式化数据并更改列标签。由于您的日期实际上是字符串而不是 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();
    });
}