Как создать график с использованием сюжета. js - PullRequest
0 голосов
/ 29 января 2020

Я абсолютный новичок и новичок в визуальной студии. Последние 3 дня я искал в Интернете, как создать диаграмму в visual studio, используя jqplot, но он постоянно говорит, что нужно использовать MVC или angular. Я не хочу использовать что-либо из этого. Я пытаюсь создать веб-сайт с пустым веб-приложением, и я хочу разместить в нем оперативную диаграмму обновления, которая может брать данные из моей базы данных в пределах самого визуального стержня ios. до сих пор единственное, что мне удалось понять, это: $ (document) .ready (function () {

    var plot1 = $.jqplot('chart1', [new Array(1)], {
        title: 'Live Random Data',
        series: [
            {
            yaxis: 'y2axis',
            label: '',
            showMarker: false,
            fill: false,
            neighborThreshold: 3,
            lineWidth: 2.2,
            color: '#0571B6',
            fillAndStroke: true}
        ],
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
                tickOptions: {
                    formatString: '%H:%M:%S'
                },
                numberTicks: 10
            },
            y2axis: {
                min: 100,
                max: 150,
                tickOptions: {
                    formatString: '%.2f'
                },
                numberTicks: 15
            }
        },
        cursor: {
            zoom: false,
            showTooltip: false,
            show: false
        },
        highlighter: {
            useAxesFormatters: false,
            showMarker: false,
            show: false
        },
        grid: {
            gridLineColor: '#333333',
            background: 'transparent',
            borderWidth: 3
        }
    });

    var myData = [];
    var x = (new Date()).getTime() - 101000;
    var y;
    var i;
    for ( i = 0; i < 100; i++) {
        x += 1000;
        y = Math.floor(Math.random() * 100);
        myData.push([x, y]);
    }

    plot1.series[0].data = myData;
    plot1.resetAxesScale();
    plot1.axes.xaxis.numberTicks = 10;
    plot1.axes.y2axis.numberTicks = 15;
    plot1.replot();

    function updateSeries() {
        myData.splice(0, 1);
        x = (new Date()).getTime();
        y = Math.floor(Math.random() * 100);
        myData.push([x, y]);

        plot1.series[0].data = myData;
        plot1.resetAxesScale();
        plot1.axes.xaxis.numberTicks = 10;
        plot1.axes.y2axis.numberTicks = 15;
        plot1.replot();
    }

    window.setInterval(updateSeries, 1000);
});


$(document).ready(function(){   
//refresh time (in millisec)
var t = 1000;
//samples to draw
var n = 20;
var x = (new Date()).getTime(); // current time
//buffer of n samples
var data = [];
for(i=0; i<n; i++){
    data.push([x - (n-1-i)*t,0]);
} 

var options = {
    axes: {
       xaxis: {
          numberTicks: 4,
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{formatString:'%H:%M:%S'},
          min : data[0][0],
          //max : data[19][0]
          max: data[data.length-1][0]
       },
       yaxis: {min:0, max: 1,numberTicks: 6,
            tickOptions:{formatString:'%.1f'} 
       }
    },
    seriesDefaults: {
       rendererOptions: { smooth: true}
    }
};
var plot1 = $.jqplot ('myChart', [data],options);


$('button').click( function(){  
    doUpdate();
    $(this).hide();
});

function doUpdate() {

    if(data.length > n-1){
        data.shift();
    }

    var y = Math.random();
    var x = (new Date()).getTime();

    data.push([x,y]);
    if (plot1) {
        plot1.destroy();
    }
    plot1.series[0].data = data; 
    //il problema è che adesso i valori su y delle ticks non sono più statici
    //e cambiano ad ogni aggiornamento, quindi cambia la logica sottostante
    // devo intervenire sui valori all'interno di options.
    options.axes.xaxis.min = data[0][0];
    options.axes.xaxis.max = data[data.length-1][0];
    plot1 = $.jqplot ('myChart', [data],options);
    setTimeout(doUpdate, t);
}

});

Но я полностью потерялся в том месте, куда я помещаю коды или Как я могу даже связать их. Мне действительно нужен кто-то, чтобы помочь мне в этом

...