2

我试图让我的气泡图上的 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

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

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

在此处输入图像描述

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

更新：

虽然已接受答案的变通办法应该有效，但这是来自 google 组的答案，显示了如何将标签格式化为 Quarters：

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

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

4

1 回答 1

2

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

第二个图表中根本没有数据。可以在这里找到一个例子：

  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 想出了一个很棒的解决方案，它使用 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];
        }
    });
}

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

选择你的毒药！

于 2013-02-08T02:39:58.950 回答