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グループからの回答は次のとおりです。

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

「日付」軸を使用する場合は、軸ラベルを四半期としてフォーマットできます (日付軸のサポートはドキュメントに記載されていませんが、機能します): http://jsfiddle.net/asgallant/m5bsr/

4

1 に答える 1

2

これには 2 つの方法があります。X 軸のラベルを表示してから、そのすぐ下に別の div を追加して、軸のカテゴリを表示することはできません (たとえば、折れ線グラフを使用)。

2 番目のグラフには、データがまったく含まれていません。例はここにあります：

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

これは機能しますが、2 つの別個のチャートを使用する必要があり、コードを理解するために何をしているのかを知らない人にとっては直観に反するため、少し面倒です。

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 に答える