Javascript 谷歌柱形图在X轴上不显示标签

问题:

所有柱状图均正确绘制在IE中。但是

当我单击“查看构建性能”按钮时，它会在前3个柱状图的x轴上显示项目名称。它不会在其他柱状图的x轴上显示项目名称。如果我再次单击该按钮，它将在所有其他柱状图的x轴上显示项目名称

如何解决这个问题？我需要在单击“查看构建性能”时显示所有柱形图的所有x轴标签

代码见附件

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="jquery.csv-0.71.js"></script>


<script>
        //resource files and constants
        var csvFile="averages.csv";

        var options = {
                vAxis: { baseline: 0, viewWindowMode: "explicit", title: 'Build times in seconds', titleTextStyle: {color: 'blue'}},
                hAxis: {title: 'Project names',  titleTextStyle: {color: 'blue'}}

        };

        google.load("visualization", "1", {packages:["corechart"]});
        //google.setOnLoadCallback(drawChart);


        //create display area for each row of chart
        function createDiv(id) {
            var div = document.createElement('div');
            div.id = id;
            div.style.width="100%";
            div.style.height="60%";
            document.body.appendChild(div);
        }


        //draw column charts
        function drawChart() {

            // grab the CSV
            $.get(csvFile, function(csvString) {

                    //transform the CSV string into a 2-dimensional array
                    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

                    // this new DataTable object holds all the data
                    var data = new google.visualization.arrayToDataTable(arrayData);

                    var barChart = new Array();
                    var view = new Array();
                    var chart_index =0;

                    var selected_column_indexes=[0,1,2,3,4];

                    var rows=[[0,1,2],[3,4,5],[6,7,8],[9,10,11],[12,13,14],[15,16,17],[18,19,20]];

                    while(chart_index < rows.length)
                    {
                        //creating div area to display chart
                        var divId = 'chart_div'+chart_index;
                        if(!document.getElementById(divId))
                            createDiv(divId);

                        // this view can select a subset of the data at a time

                        view[chart_index] = new google.visualization.DataView(data);
                        view[chart_index].setColumns(selected_column_indexes);
                        view[chart_index].setRows(rows[chart_index]);

                        barChart[chart_index] = new google.visualization.ColumnChart(document.getElementById(divId));
                        barChart[chart_index].draw(view[chart_index], options);

                        //barChart[chart_index] = new google.visualization.ColumnChart(document.getElementById(divId));
                        //barChart[chart_index].draw(view[chart_index], options);

                        chart_index++;
                    }

            });


        }//end draw chart


</script>

---

我知道这是一个旧线程，但我不得不处理它一段时间，所以对于那些仍然使用它，这里是我的解决方案

我有这个，还有没有出现的列名

chartArea: {
  left: 80,
  top: 10,
  width: '100%',
  height: '90%'
},

我换了这个

 chartArea: {
  left: 80,
  top: 10,
  width: '100%',
  height: '70%'
},

如你所见，高度太大了

---

我希望这会有所帮助。

您需要简化代码，将其简化为一个基本示例来演示问题。实际上，您的代码过于复杂，无法合理地期望其他人进行诊断（并且依赖于服务器上的CSV文件，因此我们无法对其进行测试）。首先，我建议删除

$（document）.ready

调用

drawChart

；它们内部的代码应该可以正常运行（由于加载可视化API的异步性质，可以在触发document ready后完成加载，确保事件处理程序永远不会触发）。我简化了代码并添加了csv文件。有人能告诉我这个问题吗？谢谢。我怀疑您的项目名称太长，无法放入可用空间（尽管这很难说，因为您没有为图表指定维度）。请参见vs。您可以通过使图表更宽、在项目标题中添加空格（这样它们将自动换行）、增加图表的高度（这样标签可以以一定角度绘制）或使用标签的

hAxis

选项来解决此问题（

slidedtext

，

slidedtextangle

，

maxAlternation

，

maxTextLines

，

minTextSpacing

）。可能需要这些选项的一些组合来适应您的情况。

chartArea: {
  left: 80,
  top: 10,
  width: '100%',
  height: '90%'
},

 chartArea: {
  left: 80,
  top: 10,
  width: '100%',
  height: '70%'
},