#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
Комментарии:
1. Спасибо, это мне обязательно поможет. 🙂
2. Я был уверен, что это настройка. Я не мог найти его хорошим уловом WhiteHat. developers.google.com/chart/interactive/docs/gallery /…
Ответ №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]);
}
});
Комментарии:
1. Хорошо, понял. Это поможет мне в случае линейного построения.