谷歌图表 - 在线图上绘制点

我在谷歌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

好吧，它会帮助我在线性绘图的情况下。 –

谷歌图表 - 在线图上绘制点

回答

相关问题