替换图表中数据表的标签

I am populating a Area chart from the datatable returned by Analytics API, but the labels of the columns are populated with the name of the metrics.

我正在从Analytics API返回的数据表中填充区域图表,但列的标签将填充指标的名称。

The aim is to make it easier to read, then looking for a way to replace the value of the label, I found the ticks, but had no effect:

目的是让它更容易阅读,然后寻找一种方法来替换标签的价值,我找到了蜱,但没有效果:

'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>

1 个解决方案

#1

You can use the Metadata API to get a list of all public dimensions and metrics and then loop through your API response and swap them out.

您可以使用元数据API获取所有公共维度和指标的列表,然后循环访问API响应并将其交换出来。

The <google-analytics-chart> polymer element does exactly this, so you could take a look at the implementation to get an idea of how it works.

聚合物元素正是如此,因此您可以查看实现以了解其工作原理。

To make some of this easier for you, you could use the Google Analytics javascript-api-utils module, which adds some nice convenience methods for querying the Metadata API (e.g. caching the results, filtering my dimensions/metrics/public/private, etc.).

为了使您更轻松,您可以使用Google Analytics javascript-api-utils模块,它为查询元数据API添加了一些不错的便捷方法(例如缓存结果,过滤我的维度/指标/公共/私人等等) )。

#1