文章/答案/技术大牛

发布

社区首页 >问答首页 >缺少数据点的RGraph

问缺少数据点的RGraph
EN

Stack Overflow用户

提问于 2018-10-27 17:22:32

回答 2查看 386关注 0票数 1

我想用javascript & RGraph绘制一个包含多个系列的区域填充线图，在两个日期之间进行一段时间，但是我并不是每个日期都有数据点；如何用RGraph来完成这个任务呢？

我不能错过传递给RGraph的数据中的日期，因为虽然有些系列没有这些数据，但可能是其他系列(例如ABC有1月和3月的数据，XYZ有1月和4月的数据)。

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

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

下面的代码和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仅仅用数据绘制点而忽略那些没有保留所有日期点的点呢？

谢谢安倍

javascript

rgraph

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-11-07 11:11:41

嗯，看来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错误？)，它似乎无法跨越。

票数 0

Stack Overflow用户

发布于 2018-10-27 20:35:02

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53024476

复制

相似问题

问缺少数据点的RGraph
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缺少数据点的RGraphEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缺少数据点的RGraph
EN