javascript — ось X имеет несколько значений и ширина полосы не влияет на диаграмму Google

У меня нет хорошего опыта работы с Google Chart.
Я использую столбчатую диаграмму. Ниже мой код ::

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. Пожалуйста, смотрите прикрепленный снимок экрана.введите описание изображения здесь

как правило, Столбчатые диаграммы не имеют числовой / непрерывной оси 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>