替換圖表中的數據表標籤

Question

我從分析API返回的datatable填充Area chart，但列的標籤填充了度量標準的名稱。

目的是使其更易於閱讀，然後尋找一種方式來代替標籤的值，我發現ticks，但都沒有效果：

'ticks' => [ ['v' => 'ga:goalsCompletionsAll', 'f' => 'Objetivos completados'] ], 

google.load('visualization', '1.0', { 
 
    'packages': ['corechart'] 
 
}); 
 
google.setOnLoadCallback(drawChart_conversion); 
 

 
function drawChart_conversion() { 
 
    var data = new google.visualization.DataTable("{\"cols\":[{\"id\":\"ga:date\",\"label\":\"ga:date\",\"type\":\"date\"},{\"id\":\"ga:sessions\",\"label\":\"ga:sessions\",\"type\":\"number\"},{\"id\":\"ga:pageviews\",\"label\":\"ga:pageviews\",\"type\":\"number\"},{\"id\":\"ga:goalCompletionsAll\",\"label\":\"ga:goalCompletionsAll\",\"type\":\"number\"}],\"rows\":[{\"c\":[{\"v\":\"Date(2016, 02, 21)\"},{\"v\":\"20912\"},{\"v\":\"60184\"},{\"v\":\"6386\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 20)\"},{\"v\":\"27073\"},{\"v\":\"70853\"},{\"v\":\"7425\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 19)\"},{\"v\":\"27603\"},{\"v\":\"79345\"},{\"v\":\"8738\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 18)\"},{\"v\":\"27830\"},{\"v\":\"84522\"},{\"v\":\"9350\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 17)\"},{\"v\":\"29514\"},{\"v\":\"77769\"},{\"v\":\"7936\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 16)\"},{\"v\":\"30244\"},{\"v\":\"82223\"},{\"v\":\"8605\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 15)\"},{\"v\":\"33329\"},{\"v\":\"89677\"},{\"v\":\"9227\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 14)\"},{\"v\":\"35109\"},{\"v\":\"97420\"},{\"v\":\"10222\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 13)\"},{\"v\":\"28073\"},{\"v\":\"65107\"},{\"v\":\"5984\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 12)\"},{\"v\":\"29413\"},{\"v\":\"69381\"},{\"v\":\"6604\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 11)\"},{\"v\":\"36198\"},{\"v\":\"95145\"},{\"v\":\"9865\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 10)\"},{\"v\":\"40324\"},{\"v\":\"101335\"},{\"v\":\"10038\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 09)\"},{\"v\":\"42686\"},{\"v\":\"92811\"},{\"v\":\"8538\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 08)\"},{\"v\":\"28007\"},{\"v\":\"81052\"},{\"v\":\"8973\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 07)\"},{\"v\":\"28904\"},{\"v\":\"80751\"},{\"v\":\"8635\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 06)\"},{\"v\":\"23209\"},{\"v\":\"65989\"},{\"v\":\"7249\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 05)\"},{\"v\":\"22088\"},{\"v\":\"59370\"},{\"v\":\"6216\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 04)\"},{\"v\":\"29197\"},{\"v\":\"85678\"},{\"v\":\"9060\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 03)\"},{\"v\":\"30952\"},{\"v\":\"95124\"},{\"v\":\"10687\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 02)\"},{\"v\":\"33903\"},{\"v\":\"101749\"},{\"v\":\"11771\"}]},{\"c\":[{\"v\":\"Date(2016, 02, 01)\"},{\"v\":\"30964\"},{\"v\":\"83933\"},{\"v\":\"8927\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 29)\"},{\"v\":\"28980\"},{\"v\":\"85747\"},{\"v\":\"9282\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 28)\"},{\"v\":\"22790\"},{\"v\":\"61742\"},{\"v\":\"6594\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 27)\"},{\"v\":\"21750\"},{\"v\":\"58801\"},{\"v\":\"6404\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 26)\"},{\"v\":\"13476\"},{\"v\":\"39905\"},{\"v\":\"4441\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 25)\"},{\"v\":\"21799\"},{\"v\":\"58781\"},{\"v\":\"6350\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 24)\"},{\"v\":\"32734\"},{\"v\":\"91558\"},{\"v\":\"9594\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 23)\"},{\"v\":\"32281\"},{\"v\":\"96403\"},{\"v\":\"10349\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 22)\"},{\"v\":\"37484\"},{\"v\":\"105435\"},{\"v\":\"11150\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 21)\"},{\"v\":\"29868\"},{\"v\":\"81317\"},{\"v\":\"8537\"}]},{\"c\":[{\"v\":\"Date(2016, 01, 20)\"},{\"v\":\"28819\"},{\"v\":\"81865\"},{\"v\":\"8759\"}]}]}"); 
 
    var chart_div = document.getElementById('googlechart_conversion'); 
 
    var options = { 
 
    "hAxis": { 
 
     "titleTextStyle": { 
 
     "color": "#333" 
 
     }, 
 
     "gridlines": { 
 
     "color": "transparent" 
 
     } 
 
    }, 
 
    "vAxis": { 
 
     "ticks": [{ 
 
     "v": "ga:pageviews", 
 
     "f": "teste" 
 
     }], 
 
     "minValue": 0 
 
    }, 
 
    "pointsVisible": true, 
 
    "  pointSize": 5, 
 
    "width": "100%", 
 
    "height": "200", 
 
    "chartArea": { 
 
     "width": "100%", 
 
     "height": "80%" 
 
    } 
 
    }; 
 
    var chart = new google.visualization.AreaChart(chart_div); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.google.com/jsapi"></script> 
 
<div id="googlechart_conversion"></div>

Answer 1

您可以使用Metadata API獲取所有公共維度和指標的列表，然後遍歷您的API響應並將其交換出去。

<google-analytics-chart>聚合物元素正是如此，所以你可以看看the implementation來了解它是如何工作的。

爲了讓您更輕鬆一些，您可以使用Google Analytics javascript-api-utils模塊，該模塊添加了一些用於查詢元數據API的方便方法（例如，緩存結果，過濾我的維度/指標/公/私等等）。