Google-Diagramme - Max und Min auf der horizontalen Achse

Question

Ich habe ein Liniendiagramm mit Wochennummern auf der horizontalen Achse erstellt. Es soll ein Jahr anzeigen und sollte daher bei 1 beginnen und bei 52 enden. Ich habe versucht, hAxis: {maxValue: 52} zu verwenden, aber es scheint nicht zu funktionieren. Hier sind meine Einstellungen:

<script type="text/javascript"> 
    google.charts.load('current', {'packages':['line']}); 
    google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 

    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'Ugenr.'); 
    data.addColumn('number', 'Anbefalet pris'); 
    data.addColumn('number', 'Nuværende pris'); 

    data.addRows([ 
    [1, 37.8, 41.8], 
    [2, 6.6, 32.4], 
    [3, 25.4, 25.7], 
    [4, 11.7, 10.5], 
    [5, 11.9, 6.6], 
    [6, 8.8, 7.7], 
    [7, 7.6, 9.6], 
    [8, 12.3, 10.6], 
    [9, 6.6, 14.8], 
    [10, 12.8, 11.6], 
    [11, 5.3, 4.7], 
    [12, 6.6, 5.2], 
    [13, 4.8, 3.6], 
    [14, 4.2, 3.4], 
    [15, 8.8, 31.8], 
    [16, 30.9, 6.6], 
    [17, 25.4, 25.7], 
    [18, 11.7, 10.5], 
    [19, 11.9, 10.4], 
    [20, 6.6, 7.7], 
    [21, 7.6, 9.6], 
    [22, 12.3, 10.6], 
    [23, 16.9, 14.8], 
    [24, 12.8, 11.6], 
    [25, 5.3, 4.7], 
    [26, 6.6, 5.2], 
    [27, 4.8, 3.6], 
    [28, 4.2, 6.6], 
    [29, 37.8, 41.8], 
    [30, 30.9, 32.4], 
    [31, 25.4, 25.7], 
    [32, 11.7, 10.5], 
    [33, 11.9, 10.4], 
    [34, 8.8, 7.7], 
    [35, 7.6, 9.6], 
    [36, 12.3, 10.6], 
    [37, 16.9, 14.8], 
    [38, 12.8, 11.6], 
    [39, 5.3, 4.7], 
    [40, 6.6, 5.2], 
    [41, 6.6, 3.6], 
    [42, 4.2, 6.6], 
    [43, 4.2, 3.4], 
    [44, 37.8, 41.8], 
    [45, 30.9, 32.4], 
    [46, 25.4, 25.7], 
    [47, 11.7, 10.5], 
    [48, 11.9, 6.6], 
    [49, 8.8, 7.7], 
    [50, 7.6, 9.6], 
    [51, 6.6, 10.6], 
    [52, 16.9, 14.8] 
    ]); 

    var options = { 
    chart: { 
     title: 'Anbefalede og nuværende ugepriser', 
     subtitle: 'anbefalede priser = blå, nuværende priser = rød', 
     hAxis: {maxValue: 52} 
    }, 
    legend: { position:'none' }, 
    height: 500, 
    explorer: { actions: ['dragToZoom', 'rightClickToReset'] } 
    }; 
    var chart = new google.charts.Line(document.getElementById('linechart_material')); 

    chart.draw(data, options); 
} 

$(window).resize(function(){ 
    drawChart(); 
}); 
</script> 

Answer 1

Es ist wie viele Möglichkeiten der Klassik Charts scheint sind still not implemented in the Material Charts, einschließlich hAxis.minValue.

Eine mögliche Problemumgehung besteht darin, Ihre eigenen Beschriftungen explizit zu definieren, indem Sie Zeichenfolgen statt Zahlen für Ihre erste Spalte verwenden.

Zum Beispiel (hier mit einem Etikett alle 5 Wochen):

data.addColumn('string', 'Ugenr.'); 
// ... 

// the original data set is unchanged 
var dataset = [ 
    [1, 37.8, 41.8], 
    [2, 6.6, 32.4], 
    // ... 
]; 

// convert the 1st column to string 
dataset = dataset.map(function(r) { 
    return [!((r[0] - 1) % 5) ? r[0] + '' : '', r[1], r[2]]; 
}); 
data.addRows(dataset); 

eine komplette Demo in diesem JSFiddle sehen.

Diese Version ist jedoch nicht ganz zufriedenstellend, da Sie die Wochennummer nicht erhalten, wenn Sie die Maus über einen Punkt legen, für den sie nicht definiert ist. Vielleicht möchten Sie stattdessen return [r[0] + '', r[1], r[2]]; im map() Callback machen.