Google диаграммы - построение точек на линейной диаграмме

#google-visualization

#google-визуализация

Вопрос:

Я использую линейную диаграмму в диаграмме Google 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]. но если я добавил его, он выдает вывод в виде прерывистой строки (см. Фактический график).Я хочу выводить линейную линию (без разрыва) нанесенные точки (см. Ожидаемый график). пожалуйста, помогите…

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

Ответ №1:

добавьте следующий параметр конфигурации…

interpolateNulls: true

Ответ №2:

Ну, один из способов исправить это — ввести значения в параметры null, которые нарушают линейную диаграмму.

При включении данных с нулевыми значениями для ссылки 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 amp;amp; i !== 0 amp;amp; i !== a.length ) {
      datum[1] = getPointOnLine(a[i-1],a[i 1], datum[0]);
   }
});

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