RGraph с отсутствующими точками данных
Я хочу построить линейную диаграмму заполнения области несколькими сериями, используя javascript и RGraph, для периода между двумя датами, но у меня нет точек данных для каждой даты; как мне сделать это с RGraph?
Я не могу пропустить даты в данных, которые я передаю в RGraph, потому что, хотя некоторые серии не имеют этих данных, это могут быть другие серии (например, ABC имеет данные за январь и март, а XYZ имеет данные за январь и апрель),
У меня должны быть все даты года, которые представлены горизонтальной осью, показывающей только метки месяца / периода.
Я свел это к упрощенному примеру ниже и к примеру с jsFiddle на https://jsfiddle.net/Abeeee/25m1sc7d/1/
И код ниже, и JSFiddle показывают две диаграммы, управляемые функцией drawAll(), в которой есть переменная x. Я хочу, чтобы вторая диаграмма (cvs2), которая использует x=null, не включает в себя построение этой нулевой диаграммы , а просто рисует красную линию / область между 100 и 200, в результате чего получается диаграмма, аналогичная первой (cvs1).
<!DOCTYPE HTML>
<html>
<head>
<script src='https://www.rgraph.net/libraries/RGraph.common.core.js'></script>
<script src='https://www.rgraph.net/libraries/RGraph.common.dynamic.js'></script>
<script src='https://www.rgraph.net/libraries/RGraph.common.effects.js'></script>
<script src='https://www.rgraph.net/libraries/RGraph.common.key.js'></script>
<script src='https://www.rgraph.net/libraries/RGraph.common.tooltips.js'></script>
<script src='https://www.rgraph.net/libraries/RGraph.drawing.rect.js'></script>
<script src='https://www.rgraph.net/libraries/RGraph.line.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
</script>
</head>
<body>
<canvas id='cvs1' width='900' height='300' style='border:solid 1pt red'>
[No canvas support]
</canvas>
<hr>
<canvas id='cvs2' width='900' height='300' style='border:solid 1pt blue'>
[No canvas support]
</canvas>
<script type='text/Javascript'>
drawAll();
$(window).resize(function() {
drawAll();
});
function drawAll() {
var x=150;
var data = [[0, 50, 100, x, 200],[10,20,30,40,50]];
drawChart('cvs1', data);
x=null;
var data = [[0, 50, 100, x, 200],[10,20,30,40,50]];
drawChart('cvs2', data);
}
function drawChart(canvasId, data) {
var canvas = document.getElementById(canvasId);
RGraph.Reset(canvas);
canvas.width = $(window).width() * 0.9;
var text_size = Math.min(10, ($(window).width() / 1000) * 20 );
var linewidth = $(window).width() > 500 ? 2 : 1;
linewidth = $(window).width() > 750 ? 3 : linewidth;
var line = new RGraph.Line(canvasId, data);
line.set('chart.text.size', text_size);
line.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
line.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
line.Set('chart.background.grid.color', 'rgba(238,238,238,1)');
line.Set('chart.colors', [ 'red', 'green', 'blue']);
line.Set('chart.linewidth', 1);
line.Set('chart.hmargin', 15);
line.Set('chart.labels', ['Q1\n2017','Q2','Q3','Q4','Q1\n2018']);
line.Set('chart.gutter.left',40);
line.Set('chart.gutter.right',10);
line.Set('chart.gutter.bottom',50);
line.Set('chart.filled', true);
line.Set('chart.filled.accumulative',true);
line.Set('chart.key', ['ABC', 'DEF']);
line.Set('chart.tickmarks.dot.color','white');
line.Set('chart.backgroundGridAutofitNumvlines',data.length);
line.Set('key.position','gutter'); // or graph
line.Set('chart.ymin',0);
line.Set('chart.ymax',250);
line.Set('chart.numyticks',5);
line.Set('chart.key.position.x',50);
line.Set('chart.key.position.y',10);
line.draw();
}
</script>
</body>
</html>
Итак, как вы скажете RGraph просто рисовать точки с данными и игнорировать их без сохранения всех точек даты?
Спасибо Эйб
2 ответа
Что ж, похоже, что RGraph этого не делает, поэтому я прибег к ChartJS, и в целом это работает - см. https://jsfiddle.net/Abeeee/6xrk1m23/41/
<script type='text/JavaScript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js'></script>
<div style="width:100%; height:300px">
<canvas id="canvas" style='width:100%; height:300px'></canvas>
</div>
<button id='on'>
Span Gaps=true
</button>
<button id='off'>
Span Gaps=false
</button>
var config = {
type: 'line',
data: {
labels: ['Jan\n2018', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Red',
borderColor: '#FF0000',
backgroundColor: '#FF0000',
data: [
10, 20, 30, 40, 50, 60, undefined, 80, 90, 100, 90, 80
],
}, {
label: 'Blue',
borderColor: '#0000FF',
backgroundColor: '#0000FF',
data: [
10, 20, undefined, 40, 50, 60, 70, 80, 92, undefined, 90, 80
],
}]
},
options: {
spanGaps: true,
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js Line Chart - Stacked Area'
},
tooltips: {
mode: 'index',
},
hover: {
mode: 'index'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
};
var ctx1 = document.getElementById('canvas').getContext('2d');
var myChart = new Chart(ctx1, config);
$("#on").on("click", function() {
myChart.options.spanGaps=true;
myChart.update();
});
$("#off").on("click", function() {
myChart.options.spanGaps=false;
myChart.update();
});
Используйте кнопки для включения и выключения spanGaps.
Обратите внимание, я говорю в целом, поскольку это решает мою проблему (из-за пробелов в данных), но, похоже, он не может охватить, если набор данных находится поверх другого (возможно, ошибка ChartJS?)
Вы можете использовать нулевые значения в ваших данных. Поведение немного отличается для одного набора данных по сравнению с несколькими наборами данных, хотя:
var data = [4,8,6,3,5,4,2,null,8,6,3,5,8,null,4,9,8];