2017-11-14 4 views
1

Ich benutze die Google Charts API um verschiedene Graphen in eine Webapp zu integrieren, an der ich gerade arbeite.Was Charttyp I`m benutzt, ist Area Charts, Liniendiagramme ODER Column Charts.Über google chart js

Wenn ich die Anzeige des Diagramms in die Wochenanzeige umschalte, möchte ich, dass der Titel eines beliebigen Punktes wie folgt aussieht.Wie soll ich tun? Welchen Parameter sollte ich einstellen?

target effect

Antwort

1

aus dem Bild sieht es aus, als ob Sie auf den Titel des Tooltip sich beziehen
dies der formatierten Wert der x-Achse ist

jede Zelle in der Datentabelle hat ein Wert ist, und ein formatierten Wert
der unter Verwendung von Objekt Notation eingestellt werden kann ...

{ 
    v: 1, 
    f: 'Jan 1, 2017 - Jan, 7 2017' 
} 

oder die folgende Datentabelle meth Verwendung ODS ...

setValue(row, col, val) 
setFormattedValue(row, col, formattedVal) 
setCell(row, col, val, formattedVal) 

in dem folgende Beispiel der Wert der x-Achse ist die Wochennummer (Null-Basis),
und der formatierte Wert ist der Datumsbereich.
ein Datum Formatierer verwendet wird, um den formatierten Wert zu bauen ...

var xValue = { 
    v: (i - startDate.getTime())/oneWeek, 
    f: formatDate.formatValue(dateBegin) + ' - ' + formatDate.formatValue(dateEnd) 
}; 

siehe folgende Arbeits Schnipsel ...

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var formatDate = new google.visualization.DateFormat({ 
 
    pattern: 'MMM dd, yyyy' 
 
    }); 
 

 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'Week'); 
 
    data.addColumn('number', 'y0'); 
 

 
    var oneWeek = (1000 * 60 * 60 * 24 * 7); 
 
    var startDate = new Date(2017, 0, 1); 
 
    var endDate = new Date(); 
 
    for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneWeek) { 
 
    // x value 
 
    var dateBegin = new Date(i); 
 
    var dateEnd = new Date(i + oneWeek - 1); 
 
    var xValue = { 
 
     v: (i - startDate.getTime())/oneWeek, 
 
     f: formatDate.formatValue(dateBegin) + ' - ' + formatDate.formatValue(dateEnd) 
 
    }; 
 

 
    // y value (y = 2x + 8) 
 
    var yValue = 2 * xValue.v + 8; 
 

 
    // add data row 
 
    data.addRow([ 
 
     xValue, 
 
     yValue 
 
    ]); 
 
    } 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart.draw(data); 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

+0

Dank für Ihre Antwort danken, es hilft mir sehr. – Frank