javascript - Google 柱形图在 X 轴上不显示标签

Question

问题:

所有柱形图都可以在 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>

<table align='center'>
    <tr>
        <td>
            <input type="button" value="View Build Performances" id="viewBP" onclick="drawChart()"/> 
        </td>
    </tr> 
</table>

averages.csv

Project,R7.0d.PASB,R8.1a.PASB,R9.0f.PASB,R9.1a.PASB
r6.1067.clean,11.96,11.27,10.61,10.69
r6.BUe_Sittertal_GAW.clean,15.95,16.05,16.26,15.92
r6.GE_Machine.clean,19.10,19.05,18.96,19.86
r6.Haringvlietsluis.clean,19.58,22.73,24.05,23.68
r6.M411_11450_PB.clean,8.07,8.04,7.65,7.52
r6.PSS4000_Wand_Fabrik_SPS2010_V5.clean,3.93,4.03,4.08,4.10
r6.Sichere_Bewegung_V2.clean,3.47,3.48,3.41,3.53
r6.Testprojekt_V111.clean,82.82,46.79,42.30,41.88
r6.TruBend3000_V1010_3.clean,10.50,10.35,9.71,9.80
r6.Volkerak_Brug.clean,11.89,12.21,11.93,11.90
r7.25000_30.clean,357.07,339.55,283.64,280.08
r7.ALB_WRT2_L4_SIRE.pcfix,43.82,45.15,46.71,44.76
r7.BougnonneV5.clean,17.59,16.96,16.48,16.32
r7.FT_IL_LOOP_PMI.visu,5.08,4.80,4.98,4.97
r7.FT_IL_LOOP_PMI.visudeleted,4.67,4.53,4.80,4.79
r7.Ferrero_IL.visu,101.34,110.86,112.79,104.82
r7.Ferrero_IL.visudeleted,93.84,105.74,107.96,101.68
r7.Ferrero_STL.visu,99.52,110.66,114.50,103.62
r7.Ferrero_STL.visudeleted,93.35,105.99,109.72,103.00
r7.Ferrero_v0_5.visu,159.30,174.80,242.50,141.06
r7.Ferrero_v0_5.visudeleted,140.86,142.29,204.28,127.67
r7.Festo_R7_Network.clean,13.98,13.33,14.61,14.19
r7.Fischer_Techniks_Multi.clean,4.47,4.39,4.70,4.53
r7.Les_Avants.clean,98.21,96.82,106.38,105.49
r8.12045.visu,0,61.27,21.16,21.71
r8.1279_DST.clean,0,139.35,109.44,103.19
r8.Antriebstation.clean,0,55.65,30.97,30.78
r8.Doppelmayr_Komplett.clean,0,0,460.32,466.59
r8.LSBEmmettenNiederbauen.visu,0,0,86.00,80.64
r8.LSBEmmettenNiederbauen.visudeleted,0,0,71.77,70.94
r8.P8560_Blk56_FixPlc_new.clean,0,0,36.54,36.21
r8.Securite_TS.clean,0,0,81.43,74.86

Answer 1

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

我有这个，但列名没有显示。

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

我为此做出了改变

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

如您所见，高度太大了。

我希望这会有所帮助。