缺少数据点的 RGraph

Question

我想使用 javascript & RGraph 绘制一个包含多个系列的区域填充折线图，用于两个日期之间的一段时间，但我没有每个日期的数据点；如何使用 RGraph 执行此操作？

我不能错过传递给 RGraph 的数据中的日期，因为虽然有些系列没有该数据，但其他系列可能有（例如，ABC 有 1 月和 3 月的数据，XYZ 有数据一月和四月）。

我必须有一年中的所有日期，它用仅显示 month/period 标签的水平轴表示。

我已将其归结为下面的一个简化示例，并在 https://jsfiddle.net/Abeeee/25m1sc7d/1/

上提供了一个 jsFiddle 示例

下面的代码和 JSFiddle 都显示了两个由 drawAll() 函数控制的图表，其中有一个变量 x。我想要使用 x=null 的第二张图表 (cvs2) 不包括绘制 null 而是简单地在 100 和 200 之间绘制红色 line/area，从而得到一个类似于第一个 (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 仅绘制有数据的点并忽略没有数据的点，同时保留所有日期点？

谢谢安倍

Answer 1

您可以在数据中使用空值。但是，单个数据集与多个数据集的行为略有不同：

var data = [4,8,6,3,5,4,2,null,8,6,3,5,8,null,4,9,8];

Answer 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 错误？），它似乎无法跨越。

缺少数据点的 RGraph

RGraph with missing data points

javascript

rgraph