X-Achse hat mehrere Werte und Balkenbreite nicht in Google-Diagramm

Question

Ich habe keine gute Erfahrung mit Google-Diagramm. Ich verwende Säulendiagramm. Unten ist mein Code ::

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

I JSON-Daten nach unten Struktur ::

[["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>"]] 

Wer kann mir helfen, mich vorbei, wie kann ich Breite erhöhen. Und auch nicht wollen Werte mehrfach auf der X-Achse zeigen. Bitte sehen Sie sich den beigefügten Screenshot an. enter image description here

Answer 1

typischerweise Column Charts haben keine Numeric/Permanent x-Achse

diese annulliert groupWidth weil Sie nur einen kleinen Tick haben die Spalte auf

Ändern der Werte für "Customer Count" in Strings zeichnen ermöglicht siehe groupWidth
folgende Beispiel ...

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>

Dies verursacht jedoch "Customer Count" zu auf der x-Achse wiederholt werden

müssten Sie die Zeilen zu Spalten verschieben und isStacked: true jeweils einmal anders

angezeigt werden, die kontinuierliche halten x-Achse verwenden Sie hAxis.ticks die Strichmarkierungen
siehe folgendes Beispiel zur Steuerung ...

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>