Google-Diagramme - Plotten von Punkten auf Liniendiagramm

Question

Ich benutze Liniendiagramm in Google API-Diagramm. Ich habe Referenzwerte von "GEWICHT gegen AGE" Grafik wie [1,42,2, null], [2,43.8, null], [3 , 44.1, null], [3.5, null, 44.3], [4,45.1, null], [5,46.1, null] und jetzt möchte ich Punktwerte [1.75, null, 43.7] und [3.5, Null, 44.3]. aber es gibt Ausgabe in einer Bruchlinie, wenn ich es addierte (beziehen Sie actual graph). Ich will Ausgabe mit der linearen Linie (ohne zu brechen) + die aufgezeichneten Punkte (beziehen Sie expected graph). bitte helfen ...

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<div id="chart_div"></div> 
    <script> 
    google.charts.load('current', {packages: ['corechart', 'line']}); 
    google.charts.setOnLoadCallback(drawCurveTypes); 

function drawCurveTypes() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'Time'); 
    data.addColumn('number', 'Ref Wt'); 
data.addColumn('number', 'Actual Wt'); 

    data.addRows([ 
     [1,42.2,null], //reference value 
     [1.75,null,43.7], //value to plot 
     [2,43.8,null], //reference value 
     [3,44.1,null], //reference value 
     [3.5,null,44.3], //value to plot 
     [4,45.1,null], //reference value 
     [5,46.1,null] //reference value 
     ]); 

    var options = { 
    width: 600, 
    height: 500, 
    hAxis: { 
     title: 'Weight', 
     titleTextStyle:{ 
     color: 'blue' 
     }, 
    }, 
    vAxis: { 
     title: 'Time', 
     titleTextStyle:{ 
     color: 'blue' 
     }, 
    }, 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 

</script> 

Answer 1

fügen die folgende Konfigurationsoption ...

interpolateNulls: true

Answer 2

Nun ja, eine Art und Weise, es zu beheben ist, Wert in den Null-Parametern zu injizieren, das ist es, was das Liniendiagramm bricht.

Wenn Sie Daten mit Nullwerten für Ref Wt einfügen, interpolieren Sie den Punkt mit seinen Nachbarn.

function getPointOnLine(pt1, pt2, x){ 
    // assumes ptx = [ x , y ]; 
    var m = (pt1[1] - pt2[1])/(pt1[0] - pt2[0]); 
    var b = pt1[1] - (m * pt1[0]); 
    var y = m * x + b; 
    return y; 
} 

und aus Ihren Daten massieren Sie es nur ein wenig: (ungetestet Beispiel)

data.forEach(function(datum,i ,a){ 
    if(datum[1] === null && i !== 0 && i !== a.length) { 
     datum[1] = getPointOnLine(a[i-1],a[i+1], datum[0]); 
    } 
}); 

https://jsfiddle.net/corn3lius/1g8k8762/