X軸に複数の値があり、バーの幅がGoogleのグラフに影響しない

Question

私はGoogleのグラフをよく使っていません。 私は縦棒グラフを使用しています。以下は私のコードです::

google.charts.load('current', {'packages':['corechart','bar']}); 
var data = new google.visualization.arrayToDataTable(data_to_display); 
     var options={ 
      bar:{ 
       groupWidth: '20' 
      }, 
      bars:'vertical', 
      hAxis:{ 
       title:'Number of Visits', 
       slantedText:false, 
       titleTextStyle: { 
        fontSize: 14, 
        bold: false, 
        italic: false, 
        // The color of the text. 
        color: '#3a3a3a', 
       }, 
       format: '0', 
      }, 
      vAxis: { 
       title: 'Customer Count', 
       titleTextStyle: { 
        fontSize: 14, 
        bold: false, 
        italic: false, 
        // The color of the text. 
        color: '#3a3a3a', 
       }, 
       format: '0', 
       // The color of the text outline. 
      }, 
      legend: { position: legendPosition }, 
      height: 370, 
      tooltip: { isHtml: true }, 
      /*seriesType: 'bars', 
      series: {5: {type: 'line'}}*/ 
     }; 
var chart = new google.visualization.ColumnChart(document.getElementById(element_id)); 
     chart.draw(data, options); 

私は構造以下のとおりJSONデータを渡しています::

[["Customer Count","Number of Visits",{"type":"string","role":"tooltip","p":{"html":"true"}}],[2,1,"<div style=\"width:130px;\"><b>Number of Visits :</b> 2</div><div style=\"width:130px;\"><b>Customer Count :</b> 1</div>"],[3,3,"<div style=\"width:130px;\"><b>Number of Visits :</b> 3</div><div style=\"width:130px;\"><b>Customer Count :</b> 3</div>"],[2,5,"<div style=\"width:130px;\"><b>Number of Visits :</b> 2</div><div style=\"width:130px;\"><b>Customer Count :</b> 5</div>"],[1,6,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 6</div>"],[1,8,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 8</div>"],[1,10,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 10</div>"],[1,12,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 12</div>"],[1,13,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 13</div>"]] 

誰もが、私はバーの幅を広げることができますどのように私を助けることができます。また、X軸に値を複数回表示したくない場合もあります。添付のスクリーンショットをご覧ください。 enter image description here

Answer 1

通常、Column Chartsは数値/連続X軸に

を持っていないあなただけの

に列を描画するための一つの小さなダニができます文字列に"Customer Count"の値を変更しているので、これはgroupWidthをキャンセルgroupWidth
次の例を参照してください...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([["Customer Count","Number of Visits",{"type":"string","role":"tooltip","p":{"html":"true"}}],['2',1,"<div style=\"width:130px;\"><b>Number of Visits :</b> 2</div><div style=\"width:130px;\"><b>Customer Count :</b> 1</div>"],['3',3,"<div style=\"width:130px;\"><b>Number of Visits :</b> 3</div><div style=\"width:130px;\"><b>Customer Count :</b> 3</div>"],['2',5,"<div style=\"width:130px;\"><b>Number of Visits :</b> 2</div><div style=\"width:130px;\"><b>Customer Count :</b> 5</div>"],['1',6,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 6</div>"],['1',8,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 8</div>"],['1',10,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 10</div>"],['1',12,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 12</div>"],['1',13,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 13</div>"]]); 
 
    data.sort([{column: 0},{column: 1}]); 
 

 
    new google.visualization.ColumnChart(document.getElementById('chart_div')).draw(
 
     data, 
 
     { 
 
     bar: { 
 
      groupWidth: 20 
 
     }, 
 
     tooltip: { 
 
      isHtml: true 
 
     } 
 
     } 
 
    ); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

しかし、これが原因"Customer Count"はx軸

あなたが継続的に保ち、それ以外の場合は各一回

を表示する列に行を移動し、isStacked: trueする必要がXを軸に繰り返されます、目盛り
次の例を参照してください...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([["Customer Count","Number of Visits",{"type":"string","role":"tooltip","p":{"html":"true"}}],[2,1,"<div style=\"width:130px;\"><b>Number of Visits :</b> 2</div><div style=\"width:130px;\"><b>Customer Count :</b> 1</div>"],[3,3,"<div style=\"width:130px;\"><b>Number of Visits :</b> 3</div><div style=\"width:130px;\"><b>Customer Count :</b> 3</div>"],[2,5,"<div style=\"width:130px;\"><b>Number of Visits :</b> 2</div><div style=\"width:130px;\"><b>Customer Count :</b> 5</div>"],[1,6,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 6</div>"],[1,8,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 8</div>"],[1,10,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 10</div>"],[1,12,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 12</div>"],[1,13,"<div style=\"width:130px;\"><b>Number of Visits :</b> 1</div><div style=\"width:130px;\"><b>Customer Count :</b> 13</div>"]]); 
 

 
    new google.visualization.ColumnChart(document.getElementById('chart_div')).draw(
 
     data, 
 
     { 
 
     hAxis: { 
 
      ticks: [0, 1, 2, 3, 4] 
 
     }, 
 
     tooltip: { 
 
      isHtml: true 
 
     } 
 
     } 
 
    ); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

を制御するために hAxis.ticksを使用