Question

我想使用javascript和RGraph在两个日期之间的一段时间内绘制多个系列的区域填充折线图，但是我没有每个日期的数据点；我该如何使用RGraph？

我不能错过传递给RGraph的数据中的日期，因为尽管某些系列没有该数据，但可能其他系列也有（例如，ABC拥有一月和三月的数据，而XYZ拥有一月的数据）和四月）。

我必须具有年份的所有日期，并用水平轴表示，该水平轴仅显示月份/期间标签。

我将其简化为下面的简化示例，并在https://jsfiddle.net/Abeeee/25m1sc7d/1/上使用jsFiddle示例

下面的代码和JSFiddle都显示了两个由drawAll（）函数控制的图表，其中包含变量x。我想要第二个图表（cvs2），它使用x = null来不包括绘制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用数据绘制点，而又不保留所有日期点就忽略它们？

谢谢安倍（Abe）

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();
});

使用按钮打开和关闭spanGap。

请注意，总的来说，这可以解决我的问题（潜在的数据缺口），但是如果数据集位于另一个数据集之上（似乎是ChartJS错误？），它似乎无法覆盖

缺少数据点的RGraph

2 个答案: