Google Charts vAxis Titel wird nicht angezeigt

Ich versuche, Google Charts zu verwenden, und es scheinen Probleme mit Titeln zu bestehen, die nicht angezeigt werden. Ich verwende ein Säulendiagramm und der vAxis-Titel wird nicht angezeigt. Ich habe auch begonnen, eine Materiallinien-Tabelle zu erstellen, und ich stoße auf das gleiche Problem.Google Charts vAxis Titel wird nicht angezeigt

Hier ist der Werkstoff Liniendiagramm Code:

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

die Säulendiagramm-Code hier:

ist

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

Jede Hilfe sehr zu schätzen!

Quelle

2016-12-02 Robert Britt

Materialdiagramme sind in der Beta-Version und Sie müssen eine Konverterfunktion für Ihre Optionen verwenden, um sicherzustellen, dass sie ordnungsgemäß funktionieren. Hier ein Beispiel:

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

Für Ihre Säulendiagramm, Sie explizit die vaxis.title Option wie so einstellen:

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

Quelle

2016-12-03 03:54:59

vielen Dank! –

Google Charts vAxis Titel wird nicht angezeigt

Antwort

Verwandte Themen