Share
I den første innledende Chart.js-opplæringen av serien lærte du hvordan du installerer og bruker Chart.js i et prosjekt. Du har også lært om noen globale konfigurasjonsalternativer som kan brukes til å endre skrifter og verktøytips for forskjellige diagrammer. I denne opplæringen lærer du hvordan du lager linjer og strekkdiagrammer i Chart.js.
Linjediagrammer er nyttige når du vil vise endringene i verdien av en gitt variabel med hensyn til endringene i noen annen variabel. Den andre variabelen er vanligvis tid. Linjediagrammer kan for eksempel brukes til å vise hastigheten på et kjøretøy under bestemte tidsintervaller.
Chart.js lar deg lage linjediagrammer ved å sette inn type nøkkelen til linje. Her er et eksempel:
var lineChart = nytt diagram (speedCanvas, type: 'linje', data: speedData, alternativer: chartOptions);
Vi skal nå gi dataene samt konfigurasjonsalternativene vi trenger for å plotte linjediagrammet.
var speedData = etiketter: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasett: [label: "Car Speed", data: 0, 59, 75, 20, 20, 55, 40],]; var chartOptions = legend: display: true, position: 'top', etiketter: boxWidth: 80, fontColor: 'black';
Siden vi ikke har gitt noen farge for linjediagrammet, er standardfargen RGBA (0,0,0,0.1) vil bli brukt. Vi har ikke gjort noen endringer i verktøytipset eller legenden. Du kan lese mer om å endre kasseformat, verktøylipp eller legenden i første del av serien.
I denne delen fokuserer vi på forskjellige alternativer som er spesielt tilgjengelige for å endre linjediagrammer. Alle alternativene og dataene som vi oppgav ovenfor, vil opprette følgende diagram.
Fargen på arealet under kurven bestemmes av bakgrunnsfarge nøkkel. Alle linjediagrammer trukket med denne metoden vil bli fylt med den oppgitte fargen. Du kan angi verdien av fylle nøkkelen til falsk hvis du bare vil tegne en linje og ikke fylle den med noen farge.
En ting du kanskje har lagt merke til er at vi bruker diskrete datapunkter til å plotte diagrammet. Biblioteket interpolerer automatisk verdiene til alle andre punkter ved hjelp av innebygde algoritmer.
Som standard er poengene plottet ved hjelp av en tilpasset vektet kubisk interpolering. Du kan imidlertid også angi verdien av cubicInterpolationMode nøkkelen til monotone å plotte poeng mer nøyaktig når diagrammet du plotter er definert av ligningen y = f (x). Spenningen av den plottede Bezier kurven bestemmes av lineTension nøkkel. Du kan sette verdien til null for å tegne rette linjer. Vær oppmerksom på at denne nøkkelen ignoreres når verdien av cubicInterpolationMode har allerede blitt spesifisert.
Du kan også angi verdien av grensefarge og bredde ved hjelp av grensefarge og borderWidth nøkler. Hvis du vil plotte diagrammet ved hjelp av en strekket linje i stedet for en solid linje, kan du bruke borderDash nøkkel. Den aksepterer en matrise som sin verdi, hvis elementer bestemmer lengden og avstanden til bindestrekene henholdsvis.
Utsikten til de plottede punktene kan kontrolleres ved hjelp av pointBorderColor, pointBackgroundColor, pointBorderWidth, pointRadius, og pointHoverRadius eiendommer. Det er også en pointHitRadius nøkkel, som bestemmer avstanden hvor de plottede punktene vil begynne å interagere med musen.
var speedData = etiketter: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasett: [label: "Car Speed", data: 0, 59, 75, 20, 20, 55, 40], lineTension: 0, fyll: false, borderColor: 'orange', backgroundColor: 'transparent', borderDash: [5, 5], pointBorderColor: 'orange', pointBackgroundColor : 'rgba (255,150,0,0,5)', punktRadius: 5, punktHoverRadius: 10, pointHitRadius: 30, punktBorderWidth: 2, punktStyle: 'rectRounded'];
Ovennevnte speedData objekt plott de samme datapunktene som forrige diagram, men med tilpassede verdier angitt for alle egenskapene.
Du kan også plotte flere linjer på et enkelt diagram og gi forskjellige alternativer for å tegne hver av dem slik:
var dataFirst = label: "Bil A - Speed (mph)", data: [0, 59, 75, 20, 20, 55, 40], lineTension: 0.3, // Angi flere alternativer; var dataSecond = etikett: "Bil B - Hastighet (mph)", data: [20, 15, 60, 60, 65, 30, 70], // Angi flere alternativer; var speedData = etiketter: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasett: [dataFirst, dataSecond]; var lineChart = nytt diagram (speedCanvas, type: 'linje', data: speedData);
Bardiagrammer er nyttige når du vil sammenligne en enkelt metrisk for forskjellige enheter, for eksempel antall biler som selges av forskjellige selskaper eller antall personer i bestemte aldersgrupper i en by. Du kan opprette strekkdiagrammer i Chart.js ved å angi type nøkkelen til Bar. Som standard vil dette opprette diagrammer med vertikale linjer. Hvis du vil lage diagrammer med horisontale streker, må du sette inn type til horizontalBar.
var barChart = ny diagram (densityCanvas, type: 'bar', data: densityData, alternativer: chartOptions);
La oss lage et strekdi som teller tettheten til alle planeter i vårt solsystem. Tetthetsdataene er tatt fra det planetariske faktaark fra NASA.
var densityData = etikett: 'Planets tetthet (kg / m3)', data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638]; var barChart = nytt diagram (densityCanvas, type: 'bar', data: etiketter: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus" Neptune "], datasett: [densityData]);
Parametrene gitt ovenfor vil skape følgende diagram:
På samme måte som linjediagrammet, er stolpene fylt med en lysegrå farge denne gangen også. Du kan endre fargene på stolpene ved hjelp av bakgrunnsfarge nøkkel. På samme måte kan fargene og bredden på grensene til forskjellige stenger spesifiseres ved hjelp av grensefarge og borderWidth nøkler.
Hvis du vil at biblioteket skal hoppe over tegning av grensen for en bestemt kant, kan du angi kanten som en verdi av borderSkipped nøkkel. Du kan sette verdien til topp, venstre, bunn, eller Ikke sant. Du kan også endre grensen og bakgrunnsfargen til forskjellige barer når de svever ved hjelp av hoverBorderColor og hoverBackgroundColor nøkkel.
Barene i bardiagrammet ovenfor ble automatisk dimensjonert. Du kan imidlertid kontrollere bredden på de enkelte stolpene ved hjelp av barThickness og barPercentage eiendommer. De barThickness nøkkelen brukes til å angi tykkelsen på stolper i piksler, og barPercentage brukes til å angi tykkelsen som en prosentandel av den tilgjengelige kategoribredden.
Du kan også vise eller skjule en bestemt akse ved hjelp av dens vise nøkkel. Angir verdien av vise til falsk vil gjemme den aktuelle aksen. Du kan lese mer om alle disse alternativene på dokumentasjonssiden.
La oss gjøre tetthetskartet mer interessant ved å overstyre standardverdiene for bardiagrammer ved å bruke følgende kode.
var densityData = label: 'Density of Planets (kg / m3)', data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], backgroundColor: ['rgba (0, 99, 132, 0,6 ) ',' rgba (30, 99, 132, 0,6) ',' rgba (60, 99, 132, 0,6) ',' rgba (90, 99, 132, 0,6) ',' rgba (120, 99, 132 , 0,6) ',' rgba (150, 99, 132, 0,6) ',' rgba (180, 99, 132, 0,6) ',' rgba (210, 99, 132, 0,6) ',' rgba (240, 99 , 132, 0,6) '], borderColor: [' rgba (0, 99, 132, 1) ',' rgba (30, 99, 132, 1) ',' rgba (60, 99, 132, 1) ' 'rgba (150, 99, 132, 1)', 'rgba (120, 99, 132, 1)', 'rgba ',' rgba (210, 99, 132, 1) ',' rgba (240, 99, 132, 1) '], borderWidth: 2, hoverBorderWidth: 0; var chartOptions = skalaer: yAxes: [barPercentage: 0.5], elementer: rektangel: borderSkipped: 'left',; var barChart = nytt diagram (densityCanvas, type: 'horizontalBar', data: etiketter: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus" Neptune "], datasett: [densityData],, alternativer: chartOptions);
De densityData objekt brukes til å angi grensen og bakgrunnsfargen på stolpene. Det er to ting verdt å merke seg i koden ovenfor. Først, verdiene til barPercentage og borderSkipped Egenskaper er satt inn i chartOptions objekt i stedet for dataDensity gjenstand.
For det andre, diagrammet type har blitt satt til horizontalBar denne gangen. Dette betyr også at du må endre verdien av barThickness og barPercentage for y-aksen i stedet for x-aksen for at de har noen effekt på stolpene.
Parametrene som er angitt ovenfor, vil opprette følgende strekdiagram.
Du kan også plotte flere datasett på samme diagram ved å tilordne en id av den tilsvarende aksen til et bestemt datasett. De xAxisID nøkkel brukes til å tilordne id av en hvilken som helst x-akse i datasettet. På samme måte, yAxisID nøkkel brukes til å tilordne id av hvilken som helst y-akse i datasettet. Begge aksene har også en id nøkkel som du kan bruke til å tilordne unike ids til dem.
Hvis det siste avsnittet var litt forvirrende, vil følgende eksempel bidra til å rydde opp ting.
var densityData = label: 'Planetens tetthet (kg / m3)', data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], backgroundColor: 'rgba (0, 99, 132, 0,6) ', borderColor:' rgba (0, 99, 132, 1) ', yAxisID: "y-akse-tetthet"; var gravityData = label: 'Gravity of Planet (m / s2)', data: [3,7, 8,9, 9,8, 3,7, 23,1, 9,0, 8,7, 11,0], backgroundColor: 'rgba (99, 132, 0, 0,6) ', borderColor:' rgba (99, 132, 0, 1) ', yAxisID: "y-akse-tyngdekraften"; var planetData = etiketter: ["Merkur", "Venus", "Jord", "Mars", "Jupiter", "Saturn", "Uranus", "Neptun"], datasett: [densityData, gravityData]; var chartOptions = skalaer: xAxes: [barPercentage: 1, categoryPercentage: 0.6], yAxes: [id: "y-akse-tetthet", id: "y-akse-tyngdekraften"] ; var barChart = ny diagram (densityCanvas, type: 'bar', data: planetData, alternativer: chartOptions);
Her har vi opprettet to y-akser med unike ids, og de har blitt tildelt individuelle datasett ved hjelp av yAxisID nøkkel. De barPercentage og categoryPercentage Nøkler har blitt brukt her for å gruppere stavene for individuelle planeter sammen. Innstilling categoryPercentage til en lavere verdi øker mellomrommet mellom stavene i forskjellige planeter. Tilsvarende, innstilling barPercentage til en høyere verdi reduserer plassen mellom stenger på samme planet.
I denne opplæringen har vi dekket alle aspekter av linjediagrammer og linjediagrammer i Chart.js. Du bør nå kunne lage grunnleggende diagrammer, endre utseende og plotte flere datasett på samme diagram uten problemer. I neste del av serien lærer du om radar- og polarområdeskartene i Chart.js.
Jeg håper du likte denne opplæringen. Hvis du har spørsmål, vennligst gi meg beskjed i kommentarene.
Accentsconagua