Google Charts vAxis标题不显示

我在尝试使用Google图表，并且似乎遇到了不显示标题的问题。我使用列图表和vAxis标题不显示。我也开始制作材质折线图，并且遇到了同样的问题。Google Charts 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>

任何帮助，不胜感激！

来源

2016-12-02 Robert Britt

材料图表处于测试阶段，您必须对选项使用转换器功能以确保它们正常工作。这里有一个例子：

chart.draw(data, google.charts.Line.convertOptions(options));

为了您的柱形图，你必须明确地设置vaxis.title选项，如下所示：

vAxis: { title: 'Average mAh', gridlines: { count: 8 }, minValue: 500}

来源

2016-12-03 03:54:59

太感谢你了！ –

Google Charts vAxis标题不显示

回答

相关问题