javascript - X 轴有多个值，条形宽度在谷歌图表中不受影响

Question

我对谷歌图表没有很好的经验。 我正在使用柱形图。下面是我的代码::

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 轴

这会取消 groupWidth因为你只有一个小勾号来绘制列

更改 "Customer Count" 的值字符串启用 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 轴，使用 hAxis.ticks控制刻度线
请参阅以下示例...

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>