Question

我正在尝试使用谷歌图表，似乎遇到了没有显示标题的问题。我使用柱形图并且不显示vAxis标题。我也开始制作材料折线图，我遇到了同样的问题。

这是物料折线图代码：

<html>
<head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart','line']});  
   </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = new google.visualization.DataTable();
   data.addColumn('string', 'Cycle ID');
   data.addColumn('number', '5A Continuous');
   data.addColumn('number', '10A Continuous');
   data.addColumn('number', '20A Continuous');
   data.addColumn('number', '10A Pulse');
   data.addColumn('number', '20A Pulse');
   data.addRows([
                    ['1',       2548,   2319,   828,    2348,   2192],
                    ['2',       2537,   2306,   829,    2362,   2187],
                    ['3',       2533,   2301,   833,    2347,   2170],
                    ['4',       2530,   2300,   833,    2343,   2156],
                    ['5',       2526,   2297,   837,    2339,   2147],
                    ['6',       2519,   2294,   839,    2340,   2142],
                    ['7',       2510,   2287,   838,    2356,   2146],
                    ['8',       2506,   2276,   839,    2359,   2139],
                    ['9',       2504,   2275,   840,    2346,   2127],
                    ['10',      2500,   2274,   838,    2336,   2119],
        ]);
    var formatter = new google.visualization.NumberFormat({
            pattern: '####'
        });
        formatter.format(data, 1);
        formatter.format(data, 2);
        formatter.format(data, 3);
        formatter.format(data, 4);
        formatter.format(data, 5);

   // Set chart options
   var options = {
      chart: {
         title: 'LG HG2 Battery Performance Over Cycles',
      },   
      hAxis: {
         title: 'Cycle ID',         
      },
      vAxis: {
         title: 'Milliamp Hours',        
      }, 
      'width':550,
      'height':400,
      lineWidth: 20,
   };

   // Instantiate and draw the chart.
   var chart = new google.charts.Line(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>

这是柱形图代码：

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // create and populate data table,

      function drawChart() {

        // Create the data table.
        var data = google.visualization.arrayToDataTable([
         ['Test', 'Average mAh', { role: 'style' }],
         ['Manufacturer Specification', 3000, '#804000' ],
         ['10A Continuous', 2249.970, '#804000' ],
         ['20A Continuous', 678.349, '#804000'],
         ['10A Pulsed', 2327.558, '#804000'],
         ['20A Pulsed', 2080.586, '#804000'],         
         ]);

      var formatter = new google.visualization.NumberFormat({
            pattern: '####'
        });
        formatter.format(data, 1);

        // Set chart options
        var options = {'title':'Tested Average mAh Ratings - LG HG2',
                       'width':800,
                       'height':600,
                       legend: {position: 'none'},
                       bar: {groupWidth: '90%'},
                       vAxis: { gridlines: { count: 8 }, minValue: 500}
         };

         var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

非常感谢任何帮助！

Answer 1

我在Google Script中创建图表并且无法设置vAxis标题，同样也无法修改其他一些属性。我通过修改vAxes [0]找到了成功。

chart.setOption('vAxes', {0: {title: 'title Text'} } )

或者如果您正在使用选项变量：

vAxes: { 0: { title: 'Milliamp Hours' } }

希望这可以帮助任何有同样问题的人。

Google Charts vAxis标题未显示

1 个答案: