谷歌圖表 - 在線圖上繪製點

我在谷歌api圖表中使用線圖。我有像'[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]，現在我想繪製點值[1.75，null，43.7]和[3.5，null， 44.3。但是如果我添加了它，它會給出一個突破線的輸出（參考actual graph）。我想用線性線（無中斷）+繪製點輸出（請參閱expected graph）。請幫助...谷歌圖表 - 在線圖上繪製點

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

來源

2016-10-13 pallavi patil

添加以下配置選項...

interpolateNulls: true

來源

2016-10-13 22:34:38 WhiteHat

謝謝你，它一定會幫助我。 :) –

我確定這是一個設置。我無法找到WhiteHat。 https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options – corn3lius

那麼解決它是空參數這是什麼破折線圖來注入價值的一種方式。

當爲Ref Wt包含具有空值的數據時，用其鄰居內插該點。

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

，並從您的數據只是按摩它一點點：（未經測試的例子）

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/

來源

2016-10-13 14:45:12 corn3lius

好吧，它會幫助我在線性繪圖的情況下。 –

谷歌圖表 - 在線圖上繪製點

回答

相關問題