Question

我试图让我的气泡图表上的x轴显示其标签值，如“2013财年第一季度”，与图表轴类似，如下所示：

Quarter demo

在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

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

这是我目前所拥有的图片，以季度为轴，但唉，你不知道你在看哪一年......

enter image description here

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

更新：

虽然接受答案的解决方法应该有效，但以下是Google群组的答案，其中显示了如何将标签格式化为Quarters：

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];
        }
    });
}

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

选择你的毒药！

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

1 个答案: