Plotly naudojimas norint sukurti stačiakampę koordinačių sistemą „JavaScript“, skirta Vue.js

Sukurkite tinkintą koordinačių sistemą naudodami Plotly

Grafiniame darbe, kaip ir dirbant su stačiakampe koordinačių sistema, pradžios ir ašies mastelio išdėstymas yra labai svarbus. Naudodami diagramų bibliotekas, kurios nepalaiko lanksčių ašių modifikacijų, kūrėjai dažnai susiduria su apribojimais. Gali būti sunku sukurti grafiką, ypač kai pradžia yra viduryje, o ašys pažymėtos įprastu skaitiniu formatu.

Jei „JavaScript“ projektui naudojate Vue.js, gali kilti panašių problemų. Diagramų bibliotekos gali nubraižyti duomenis, tačiau jos dažnai necentruoja šaltinio ir nereguliuoja ašių, kad atitiktų vartotojo poreikius. Tai gali būti ypač varginanti bandant nubraižyti konkrečius grafikų tipus, pvz., apskritimus ar simetriškas formas.

Stipri JavaScript grafikų biblioteka, pavadinta Plotly, gali padėti išspręsti šią problemą. Jis siūlo didelį pritaikymo laipsnį, leidžiantį pakeisti etikečių ir ašių padėtis, kad atitiktų jūsų projekto reikalavimus. Su atitinkama konfigūracija galite sukurti koordinačių sistemą, kuri tiksliai atitinka jūsų poreikius.

Ši pamoka parodys, kaip naudoti Plotly, kad sukurtumėte stačiakampę koordinačių sistemą su simetriškai pavadintomis ašimis ir nuliu centre. Tiksliai žinosite, kaip tai pritaikyti savo Vue.js projekte, kai baigsite.

Plotly ir Chart.js sprendimų supratimas

Pirmuoju metodu, naudojant pagal užsakymą sukuriama stačiakampė koordinačių sistema su nuliu centre Plotly.js. „Plotly“ garsėja savo pritaikomumu, leidžiančiu programuotojams sukurti daugybę grafikų pritaikymų. Pagrindinė problema, kurią bando išspręsti šis scenarijus, yra tai, kaip išdėstyti ašis taip, kad jos atitiktų simetrišką skalę, naudojant vartotojo nurodytus standartinius skaitinius žingsnius. x ašis ir y ašis. Galime tiesiogiai valdyti ašyse rodomas reikšmes ir užtikrinti, kad jos būtų tinkamo formato, naudodami tokias savybes kaip tickvals. Čia svarbu naudoti nulinis parinktis, kuri verčia Plotly nubrėžti ašis ties nuliu, taip grafiko pradžią patalpindama brėžinio srities viduryje.

Naudojant diapazonas atributas, garantuojantis, kad grafikas parodys nuoseklų plotą, yra dar vienas esminis šio metodo komponentas. Be jos, „Plotly“ automatinio mastelio keitimo funkcija suteiktų vaizdą už priimtino diapazono simetriniam diagramoms sudaryti. Įterpdami grafiką į DOM elementą, Plotly.newPlot()Lankstumas leidžia lengvai integruoti į Vue.js projektus. Tai leidžia kūrėjams visiškai kontroliuoti grafiko pateikimą, įskaitant galimybę dinamiškai jį atnaujinti, reaguojant į vartotojo įvestį arba duomenų rinkinio pakeitimus.

Kita gerai žinoma grafikų biblioteka, Chart.js, naudojamas antrame tirpale. Nors Chart.js visiškai konfigūruojamos ašys nėra tokios universalios kaip Plotly, ji vis tiek gali būti pritaikyta konkrečiams šio projekto poreikiams. Diagramos parinktys leidžia koreguoti xAxes ir yAxes charakteristikos, kurios reguliuoja grafiko mastelį ir garantuoja, kad ašys atspindi simetrišką diapazoną. To reikia norint nubraižyti tokias formas kaip apskritimai, kuriems reikia tolygiai išdėstytų skaitinių žingsnių abiejose ašyse. Tikslas yra nubrėžti formos kontūrus, o ne tamsintas sritis po grafiko linija, todėl užpildyti parinktis išjungta.

Mes užtikriname kodo moduliškumą ir pakartotinį naudojimą abiejose sistemose, įtraukdami diagramų sudarymo logiką į metodus, kurie yra dinamiškai aktyvinami. Dėl šios priežasties grafiką galima modifikuoti arba perdaryti atsižvelgiant į įvairius duomenų rinkinius, o tai labai padidina sprendimų prisitaikymą prie kintančių įvesties. Ši integracija puikiai veikia su Vue.js, nes grafiką galima atnaujinti naudojant Vue reaktyvumo sistemą ir įterpti į šabloną. Be to, apibrėžiant diapazonus ir charakteristikas, kurios draudžia automatinį mastelio keitimą arba nepageidaujamus išdėstymo pakeitimus, Plotly ir Chart.js pavyzdžiai garantuoja, kad diagrama visuose įrenginiuose atrodys nuosekli.

// Step 1: Install Plotly.js in your Vue.js project
// npm install plotly.js-dist --save
// Step 2: Import Plotly in your Vue component
import Plotly from 'plotly.js-dist';
// Step 3: Create a method to generate the graph
methods: {
  drawGraph() {
    const data = [{
      x: [-0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3],
      y: [0.3, 0.2, 0.1, 0, -0.1, -0.2, -0.3],
      type: 'scatter',
      mode: 'lines+markers',
    }];
    const layout = {
      xaxis: {
        range: [-0.5, 0.5],
        zeroline: true,
        tickvals: [-0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3],
      },
      yaxis: {
        range: [-0.5, 0.5],
        zeroline: true,
        tickvals: [-0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3],
      },
    };
    Plotly.newPlot('graphDiv', data, layout);
  }
}
// Step 4: Include a <div> to hold the graph in your template
<template>
  <div id="graphDiv"></div>
</template>

// Step 1: Install Chart.js in your project
// npm install chart.js --save
// Step 2: Import and set up Chart.js
import { Line } from 'vue-chartjs';
import { Chart } from 'chart.js';
// Step 3: Create a method for custom axes
methods: {
  renderChart() {
    const ctx = document.getElementById('myChart');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: [-0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3],
        datasets: [{
          data: [0.3, 0.2, 0.1, 0, -0.1, -0.2, -0.3],
          borderColor: '#3e95cd',
          fill: false
        }]
      },
      options: {
        scales: {
          xAxes: [{
            ticks: {
              min: -0.5,
              max: 0.5
            }
          }],
          yAxes: [{
            ticks: {
              min: -0.5,
              max: 0.5
            }
          }]
        }
      }
    });
  }
}
// Step 4: Include the canvas element in your template
<template>
  <canvas id="myChart"></canvas>
</template>

// Step 1: Install Jest and Vue Test Utils
// npm install --save-dev jest @vue/test-utils
// Step 2: Write unit tests for the Plotly implementation
import { shallowMount } from '@vue/test-utils';
import MyGraphComponent from '@/components/MyGraphComponent.vue';
describe('Plotly graph rendering', () => {
  it('renders correctly with custom axes', () => {
    const wrapper = shallowMount(MyGraphComponent);
    wrapper.vm.drawGraph();
    expect(wrapper.find('#graphDiv').exists()).toBe(true);
  });
});
// Step 3: Write unit tests for the Chart.js implementation
describe('Chart.js graph rendering', () => {
  it('renders the graph with correct axis configuration', () => {
    const wrapper = shallowMount(MyGraphComponent);
    wrapper.vm.renderChart();
    expect(wrapper.find('#myChart').exists()).toBe(true);
  });
});

Plotly lankstumas pritaikytoms koordinačių sistemoms

Didelė pritaikymo laisvė Plotly.js yra vienas iš pagrindinių privalumų naudojant „JavaScript“ diagramas. „Plotly“ suteikia jums visišką visų grafiko aspektų valdymą, priešingai nei kai kurios paprastesnės diagramų sudarymo sistemos. Tai ypač naudinga kuriant stačiakampę koordinačių sistemą, kurios pradžia yra centre – tai funkcija, būtina norint pavaizduoti konkrečias geometrines formas arba simetriškus duomenų skirstinius. Pažymint ašis tokiomis reikšmėmis kaip as -0,3, -0,2, -0,1, 0, 0,1, „Plotly“ išdėstymo sąranka suteikia visišką varnelių žymių, mastelio keitimo ir ašių etikečių kontrolę.

Plotly gebėjimas valdyti daugybę pėdsakų leidžia tame pačiame grafike nubraižyti skirtingus duomenų taškus netrukdant vienas kitam, o tai yra dar viena esminė savybė. Dirbant su įvairiais duomenų rinkiniais arba bandant brėžti sudėtingas formas, pvz., apskritimus ar elipses, ši galimybė yra labai naudinga. Platus „Plotly“ išdėstymo pasirinkimas gali padėti kūrėjams išspręsti įprastą problemą, kai viena ašis veikia nepriekaištingai, o kita nesulygiuoja taip, kaip planuota.

Be to, Plotly lengvai sąveikauja su tokiomis sistemomis kaip Vue.js, leidžianti programuotojams kurti dinamines, reaktyvias diagramas, kurios prisitaiko prie vartotojo įvesties arba duomenų rinkinio modifikacijų. Tai ypač svarbu interaktyviems projektams ar programoms, kurioms reikia keisti duomenis realiuoju laiku. Plotly yra puikus pasirinkimas sudėtingiems grafikų kūrimo projektams apskritai dėl savo pritaikomumo ir suderinamumo su JavaScript sistemomis, ypač kai reikalinga tiksli ašies sistemos kontrolė.