Question

我在谷歌api图表中使用了线图。我的参考值为＆＃39; WEIGHT AGE＆＃39;图像[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>

Answer 1

添加以下配置选项......

interpolateNulls: true

Answer 2

解决这个问题的一种方法是在null参数中注入值，这就是打破折线图。

当包含具有空值的数据用于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/

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

2 个答案: