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>

但是，这会导致{x 1}重复"Customer Count"

您需要将行移至列，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>

X轴有多个值，条形宽度不影响谷歌图表

1 个答案: