hAxis标签在Google图表中被切断

Question

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

所有的东西都在图表上正确显示，但我们在haxis上显示网站名称。由于网站名称太长，比如“www.google.com”，www.facebook.com，这个标签正在被中断。

代码绘制图表下面给出：

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

宽度和分别的“my_div”高度是350像素300像素和。我们还附上​​下面给出这个问题的屏幕截图：

谁能帮助我，我们如何防止这个领域的问题。或者，谷歌图表API中有没有可用的方法来防止这种情况发生？

等待解决方案。

Answer 1

这是谷歌可视化的总是反复出现的问题，在我看来:(有几个“招数”一个可以体验：chartArea和​​这是您与以下chartData一个的jsfiddle代码，重现问题以上：

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

小提琴 - >http://jsfiddle.net/a6WYw/

---

chartArea可以用来调整从图例/ hAxis以及酒吧的内部高度（图表本身没有坐标轴和图例）中获取空间的上部“填充”。例如

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

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

小提琴 - >http://jsfiddle.net/Swtv3/

---

我个人最喜欢的是将hAxis传说内图表由

hAxis : { textPosition : 'in' } 

这将兑现短期和长叙述当有几个很长的字符串时，并不会使图表看上去太“奇怪”。

小提琴 - >http://jsfiddle.net/7HBmX/

---

作为每评论 - 移动图表外的 “中” 的标签。据我所知，没有原生的方式来做到这一点，但我们总是可以改变<svg>。这可以是一个困难的任务，但在这种情况下，我们知道具有text-anchor="middle"属性的唯一<text>元素是h轴标签和整体h轴说明。因此，

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

将标签移动到图表外部。演示 - >http://jsfiddle.net/970opuu0/