1

javascript と RGraph を使用して、2 つの日付の間の期間について、複数のシリーズでエリア フィル ライン チャートをプロットしたいのですが、すべての日付のデータ ポイントがありません。RGraph でこれを行うにはどうすればよいですか?

RGraph に渡すデータの日付を見逃すことはできません。これは、一部の系列にはそのデータがなくても、他の系列にはある可能性があるためです (たとえば、ABC には 1 月と 3 月のデータがあり、XYZ には 1 月と 4 月のデータがあります)。 .

年のすべての日付が必要です。これは、月/期間のラベルのみを示す横軸で表されます。

これを以下の簡単な例に要約し、 https: //jsfiddle.net/Abeeee/25m1sc7d/1/ に jsFiddle の例を示します。

以下のコードと JSFiddle は両方とも、変数 x を持つ drawAll() 関数によって制御される 2 つのチャートを示しています。x=null を使用する 2 番目のグラフ (cvs2) には、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 に指示するにはどうすればよいでしょうか?

ありがとう阿部

4

2 に答える 2

0

データで null 値を使用できます。ただし、単一のデータセットと複数のデータセットでは動作が若干異なります。

var data = [4,8,6,3,5,4,2,null,8,6,3,5,8,null,4,9,8];
于 2018-10-27T20:35:02.817 に答える