Блог

У меня проблема с отображением оси X в нижней части графика рассеянного типа, когда мои значения Y отрицательны. Ось X продолжает отображаться у верхнего края холста (пока метки X расположены правильно).
В коде JS, используемом ниже, div вокруг холста имеет черный фон, поэтому ось и метки белые. Кто-нибудь может сказать мне, чего мне не хватает, пожалуйста? (Я новичок в RGraph, это мое первое испытание).
Спасибо, Серж

     // random 100 data points, x in 100..200, y in -120..-50
    var data = [];
    for(let i = 0; i < 100; i  ) data.push([100 i, -50 - Math.random() * 70]);
    var xmin = data[0][0], xmax = data[data.length - 1][0], ymin = data[0][1], ymax = data[0][1];
    for(let i = 1; i < data.length; i  ) { if(data[i][1] < ymin) ymin = data[i][1]; if(data[i][1] > ymax) ymax = data[i][1]; }
    
    // scatter graph with white text, green lines, no ticks
    var chart = new RGraph.Scatter({
        id: 'chart',
        data: data,
        options: {  backgroundGridDotted: true, marginLeft: 60, marginBottom: 50, line: true, tickmarksStyle: null, textColor: 'white',
                    xaxisScale: true, xaxisScaleMin: xmin, xaxisScaleMax:xmax, xaxisColor: 'white', xaxisTitle: 'Frequency (MHz)',
                    yaxisScaleMin: ymin, yaxisScaleMax: ymax, yaxisColor: 'white', yaxisTitle: 'Received Power Level (dBm)' 
                  } 
    }).draw();
 

Попробуй это:

https://codepen.io/rgraph/full/QWKbRwr

(используйте кнопку «Изменить вид», чтобы увидеть код)

 <script src="https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.drawing.xaxis.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.scatter.js"></script>

<div style="display: inline-block; background-color: black">
    <canvas id="cvs" width="600" height="250"></canvas>
</div>

<script>        
    // random 100 data points, x in 100..200, y in -120..-50
    var data = [];
    for(let i = 0; i < 100; i  ) data.push([100 i, -50 - Math.random() * 70]);
    
    var xmin = data[0][0], xmax = data[data.length - 1][0], ymin = data[0][1], ymax = data[0][1];
    for(let i = 1; i < data.length; i  ) { if(data[i][1] < ymin) ymin = data[i][1]; if(data[i][1] > ymax) ymax = data[i][1]; }
    
    // scatter graph with white text, green lines, no ticks
    scatter = new RGraph.Scatter({
        id: 'cvs',
        data: data,
        options: {
            backgroundGridDotted: true,
            marginLeft: 60,
            marginBottom: 50,
            line: true,
            tickmarksStyle: null,
            textColor: 'white',
            xaxisScale: true,
            xaxisScaleMin: xmin,
            xaxisScaleMax:xmax,
            xaxisColor: 'white',
            xaxisTitle: 'Frequency (MHz)',
            yaxisScaleMin: ymin,
            yaxisScaleMax: ymax,
            yaxisColor: 'white',
            yaxisTitle: 'Received Power Level (dBm)',
            xaxis: false,
            yaxisTickmarksLastBottom: false
        } 
    }).trace();
    
   new RGraph.Drawing.XAxis({
        id: 'cvs',
        y: scatter.canvas.height - scatter.marginBottom,
        options: {
            xaxisLabels: ['Rich','Alex','Johnny','Kev','Pete','Luis','John','Barry'],
            xaxisTickmarksCount: 8,
            xaxisColor: 'white',
            marginLeft: scatter.get('marginLeft'),
            marginRight: scatter.get('marginRight'),
            xaxisTickmarksLastLeft: false
        }
    }).draw();
</script>