hAxis标签在Google图表中被截断

Question

通过哪个网站跟踪访问者的数量并对其进行一些分析。我们正在创建一个柱形图，以图形形式显示分析报告。

所有内容都在图表上正确显示，但我们在haxis上显示网站名称。由于网站名称太长，如www.google.com＆＃34;，www.facebook.com，这个标签在haxis上被切断了。

绘制图表的代码如下：

function createTodayChart(chartData){
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Sources');
  data.addColumn('number', 'Total Sales');

  for (var i in chartData){
    //alert(chartData[i][0]+'=>'+ parseInt(chartData[i][1]));
    data.addRow([chartData[i][0], parseInt(chartData[i][1])]);
  }

  var options = {
    legend: {position:'top'},
    hAxis: {title: 'Sources', titleTextStyle: {color: 'black'}, count: -1, viewWindowMode: 'pretty', slantedText: true},
    vAxis: {title: 'Total Sales (in USD)', titleTextStyle: {color: 'black'}, count: -1, format: '$#'},
    colors: ['#F1CA3A']
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('my_div'));
  chart.draw(data, options);    
}  

chartData变量中的数据采用数组形式：

var chartData = [];  
cartData.push('www.w3school.com', 106);  
cartData.push('www.google.com', 210); 

＆＃34; my_div＆＃34;的宽度和高度分别是350px和300px。我们还附上​​了以下问题的屏幕截图：

任何人都可以帮助我，我们如何防止这种切割问题。或者，谷歌图表API中是否有任何方法可以防止这种情况？

等待解决方案。

Answer 1

这是谷歌可视化中一直存在的问题，在我看来:(有一些＆＃34;技巧＆＃34;可以试验：chartArea和hAxis.textPosition。这是你的使用以下chartData在jsFiddle中编写代码，重现上面的问题：

var chartData = [
    ['www.facebook.com', 45],
    ['http://www.google.com', 67],
    ['www.stackoverflow.com', 11]    
];

小提琴 - ＆gt;的 http://jsfiddle.net/a6WYw/

---

chartArea可用于调整上部＆＃34;填充＆＃34;从下面的图例/ hAxis中获取空间以及条形图的内部高度（图表本身没有轴和图例）。例如

chartArea: {
   top: 55,
   height: '40%' 
}

缩小chartArea，为hAxis上的图例留出空间。

小提琴 - ＆gt;的 http://jsfiddle.net/Swtv3/

---

我个人最喜欢的是将hAxis传奇放在

图表中

hAxis : { textPosition : 'in' } 

这既符合短篇和长篇，也不会让图表看起来太过奇怪＆＃34;当有一些非常长的字符串时。

小提琴 - ＆gt;的 http://jsfiddle.net/7HBmX/

---

根据评论 - 移动＆＃34; in＆＃34;图表外的标签。据我所知，没有本地方法可以做到这一点，但我们总是可以改变<svg>。这个可能是一项艰巨的任务，但在这种情况下，我们知道<text>属性text-anchor="middle"只有var y, labels = document.querySelectorAll('[text-anchor="middle"]'); for (var i=0;i<labels.length-2;i++) { y = parseInt(labels[i].getAttribute('y')); labels[i].setAttribute('y', y+30); } 属性是h轴标签和整体h轴描述。所以

{{1}}

将标签移到图表外。演示 - ＆gt;的 http://jsfiddle.net/970opuu0/