google-visualization - 更改 x 轴标签以显示 Google 可视化气泡图的年份和季度

Question

我试图让我的气泡图上的 x 轴以季度显示其标签值，例如“Q1 FY13”，类似于图表轴，如下所示:

在 API 中，他们提到使用数据表中的域列作为角色，然后您可以在其中指定字符串，例如“Q1/09”(https://developers.google.com/chart/interactive/docs/roles)，

role:  domain,   data,       data,   domain,   data,     data
      'Q1/09',   1000,        400,  'Q1/08',    800,      300

但据我所知，这似乎受到您使用的图表类型的限制，气泡图的第一列必须是数字。

这是我目前所拥有的图片，以四分之一为轴，但唉，你无法分辨你在看哪一年......

所以有人知道这是否可能吗？如果没有，我是否可以采取另一种解决方法来显示这些标签？

更新:

虽然已接受答案的解决方法应该有效，但这是来自谷歌群组的答案，显示了如何将标签格式化为季度:

https://groups.google.com/forum/#!topic/google-visualization-api/_qk7DkPmKxU

如果您使用“日期”轴，您可以将轴标签格式化为四分之一(对日期轴的支持未在文档中列出，但它有效):http://jsfiddle.net/asgallant/m5bsr/

Answer 1

有两种方法可以做到这一点。您不能显示 X 轴标签，然后在其正下方添加另一个 div 以显示轴类别(例如，使用折线图)。

第二个图表中根本没有数据。可以找到一个例子here :

  function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'Cats');
    data.addColumn('number', 'Blanket 1');
    // This dummy series is to extend the chart from 0-5 for padding
    data.addColumn('number', null);
    data.addRows([
      [{v: 1, f:'A'}, 1, 10, null],
      [{v: 2, f:'B'}, 2, 5, null],
      [{v: 3, f:'C'}, 4, 12, null],
      [{v: 4, f:'D'}, 8, 5, null],
      [{v: 5, f:''}, null, null, {v: 0, f:''}]
    ]);

    options = {
      curveType: 'function',
      lineWidth: 2,
      hAxis: {
        // Show a baseline at 0
        baseline: 0,
        // 6 Gridlines, 4 labels + left and right for padding
        gridlines: {
          count: 6
        },
        // Hide our labels
        textPosition: 'none'
      },
      vAxis: {
        baseline: 0,
      },
      series: [
        {},
        {},
        // Hide our dummy series
        {
          lineWidth: 0,
          pointsize: 0,
          visibleInLegend: false
        },
      ]
    };

    // Add dummy data for the axis labels
    var data2 = new google.visualization.DataTable();
    data2.addColumn('string', 'x');
    data2.addColumn('number', 'dummy');
    data2.addRows([
      ['A', null],
      ['B', null],
      ['C', null],
      ['D', null]
    ]);

    chart1 = new google.visualization.LineChart(document.getElementById('visualization'));
    chart1.draw(data, options);

    chart2 = new google.visualization.LineChart(document.getElementById('visualization2'));
    chart2.draw(data2,
                {
                  chartArea: {
                    top:0,
                    height:"0%"
                  },
                  min: 0,
                  max: 0,
                  hAxis: {
                    baselineColor: '#FFFFFF'
                  },
                  vAxis: {
                    baselineColor: '#FFFFFF',
                    direction: -1,
                    textPosition: 'none',
                    gridlines: {
                      color: '#FFFFFF'
                    }
                  }
                });
  }

这行得通，但有点烦人，因为您必须使用两个单独的图表，对于任何不知道您在做什么的人来说，这是违反直觉的来弄清楚代码。

所以 jeffery_the_wind came up with an awesome solution它使用 jquery 破解 SVG 的轴标签。诀窍是将轴标签与 position: in 对齐，然后使用 javascript 循环遍历 svg 以查找正确对齐的文本元素，并使用数组的内容更改它们的值。以下是他使用的代码示例:

/*
 *
 * The following 2 functions are a little hacky, they have to be done after calling the "draw" function
 * The bubble chart originally displays only numbers along the x and y axes instead of customer or product names
 * These 2 functions replace those numbers with the words for the customers and products
 *
 */
for ( var i = -2; i < products.length + 1; i ++ ){
    $('#customer_product_grid svg text[text-anchor="start"]:contains("'+i+'")').text(function(j,t){
        if (t == i){
            if (i >= products.length || i < 0){
                return " ";
            }
            return products[i];
        }
    });
}

for ( var i = -2; i <= customers.length + 3; i ++ ){
    $('#customer_product_grid svg text[text-anchor="end"]:contains("'+i+'")').text(function(j,t){
        if (i >= customers.length + 1 || i <= 0){
            return " ";
        }else if (t == i){                    
            return customers[i-1];
        }
    });
}

这个版本非常棒，可用性更好一些。但是，如果您想将其他文本添加到图表/以某些方式对齐事物，它确实会出现问题。

选择你的毒药!