Obsługa biblioteki chart.js
Podsumowanie:W wersji nAxiom 1.12.0.0 obsługiwana jest biblioteka Chart.js w wersji 4.4.0 (licencja MIT). Kod biblioteki został włączony do platformy nAxiom, dzięki czemu można z niej korzystać jak z natywnej funkcjonalności.
Biblioteka umożliwia renderowanie wykresów różnego typu z użyciem JavaScript oraz zasilanie ich danymi pochodzącymi z bazy danych lub kontekstu formularza. Konfiguracja wykresów jest przedstawiona w dokumentacji projektu Chart.js na stronie projektu.
Wykresy można definiować w sekcjach HTML (na formularzach oraz widgetach typu sekcja HTML), w kontrolkach blok HTML oraz w kolumnie HTML w widoku listy.
W tym temacie
Wstęp
W tym temacie opisano sposób definiowania wykresu w sekcji HTML. Opis ten pozostaje właściwy także dla kontrolki blok HTML. W przypadku kolumny HTML w widoku listy dane do wykresu muszą pochodzić z bieżącego rekordu widoku listy (RowDataContext.NazwaKolumny, gdzie NazwaKolumny to właściwość Nazwa SQL); patrz także Zalecenia poniżej. Wykres jest generowany kodem JavaScript jako element HTML canvas. Konfiguracja wykresu w sekcji HTML obejmuje trzy części:
- Zapytanie SQL: zwraca dane do wykresu, jeden rekord jest jedną serią danych, nazwy kolumn to etykiety wartości, a zwrócone dane to same wartosci.
- Szablon HTML: musi zawierać deklarację elementu canvas z identyfikatorem, który zostanie użyty w kodzie JavaScript:
<canvas id="niepowtarzalny-identyfikator"></canvas>
Aby poprawnie wyświetlić kilka wykresów na stronie nAxiom, ich elementy canvas muszą mieć niepowtarzalne identyfikatory.
- Kod JavaScript: definiuje podstawowe elementy wykresu, takie jak rodzaj wykresu, serie danych, opcje konfiguracyjne. W kodzie należy także zadeklarować zmienne, które będą uzywane w seriach danych jako etykiety i/lub wartości i powiązać je z danymi zwróconymi przez zapytanie, wskazując nazwę kolumny i numer rekordu (pierwszy rekord ma numer 0).
Ogólny przykład konfiguracji wykresu
Zapytanie SQL:
select
() as InProgress
,() as Delayed
Szablon HTML:
<div>
<canvas id="chart1"></canvas>
</div>
Kod JavaScript:
W przykładzie zadeklarowano zmienne używane w seriach danych jako wartości. Za zmienne są podstawiane dane z zapytania SQL — wskazana kolumna i numer rekordu.
W przypadku sekcji HTML na formularzu, w tym na widżecie typu formularz, referencja do wyniku zapytania SQL wymaga użycia kodu formularza:
var DanaDoWykresu = window["KodFormularza_QueryModel"][indeksWierszaZapytaniaSQL].NazwaKolumnyZapytaniaSQL;
W przypadku użycia widgetu typu sekcja HTML, należy użyć w referencji kodu pulpitu, na którym ma być używany widżet:
window["kodPulpitu_QueryModel"][indeksWierszaZapytaniaSQL].NazwaKolumnyZapytaniaSQL
Przykład kodu JavaScript dla wykresu
//deklaracja zmiennych i przypisywanie wartości
var val_InProgress = window["MyDashboardCode_QueryModel"][0].InProgress;
var val_Delayed = window["MyDashboardCode_QueryModel"][0].Delayed;
//deklarowanie wykresu
var ctx = document.getElementById('chart1').getContext('2d');
//definiowanie serii danych
var data = {
// właściwa konfiguracja serii danych - tutaj używa się zmiennych zadeklarowanych na początku
};
//definiowanie konfiguracji wykresu
var config = {
// właściwa konfiguracja wykresu
};
//utworzenie wykresu
new Chart(ctx, config);
Zalecenia
- W celu poprawnego renderowania kilku wykresów na stronie nAxiom, elementy canvas każdego wykresu muszą mieć niepowtarzalne wartości atrybutu id.
- Dla kolumny HTML zaleca się stosowanie automatycznej wysokości wykresu i definiowanie jedynie szerokości zgodnej z szerokością kolumny. Pozwoli to na indywidualne dostosowanie wysokości wykresu w każdym rekordzie.
- Kod HTML w kolumnie HTML musi zawierać co najmniej jeden element z atrybutem rowHtmlElement o dowolnej wartości, która jednak nie może zawierać cyfr. W przeciwnym razie kod Javascript nie zostanie wykonany.
- Aby kontrolować rozmieszczenie wykresów w obrębie sekcji zaleca się stosowanie techniki Flexbox Layout.
Przykład konfiguracji dwóch wykresów w jednej sekcji
Zapytanie SQL:
select
(select count(Id) from [dbo].[RecruitmentProcess]
where [RecruitmentDeadline] >= getdate()
and Worksite = {&HRDevelopment.Dictionaries.Worksite.Design}
and Status != {&HRDevelopment.BusinessStatuses.RecruitmentProcess.Rec_Finished}
) as WorksiteDesignInTimeNotFinished
,(select count(Id) from [dbo].[RecruitmentProcess]
where [RecruitmentDeadline] < getdate()
and Worksite = {&HRDevelopment.Dictionaries.Worksite.Design}
and Status != {&HRDevelopment.BusinessStatuses.RecruitmentProcess.Rec_Finished}
) as WorksiteDesignOutOfTimeNotFinished
,(select count(Id) from [dbo].[RecruitmentProcess]
where [RecruitmentDeadline] >= getdate()
and Worksite = {&HRDevelopment.Dictionaries.Worksite.RoadConstruction}
and Status != {&HRDevelopment.BusinessStatuses.RecruitmentProcess.Rec_Finished}
) as WorksiteRoadConstructionInTimeNotFinished
,(select count(Id) from [dbo].[RecruitmentProcess]
where [RecruitmentDeadline] < getdate()
and Worksite = {&HRDevelopment.Dictionaries.Worksite.RoadConstruction}
and Status != {&HRDevelopment.BusinessStatuses.RecruitmentProcess.Rec_Finished}
) as WorksiteRoadConstructionOutOfTimeNotFinished
Szablon HTML:
<QueryRowTemplate>
<div
class="widgetFullContainer"
style="display:flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: space-evenly; margin: 0.5rem;">
<div
class="chart"
style="width: 40%">
<canvas id="chart1"></canvas>
<p style="text-align:center">Dział projektów</p>
</div>
<div
class="chart"
style="width: 40%">
<canvas id="chart2"></canvas>
<p style="text-align:center">Dział budowy dróg</p>
</div>
</div>
</QueryRowTemplate>
Kod JavaScript:
var ValueWorksiteDesignInTimeNotFinished = window["HRDDeadlinesByWorkstite_QueryModel"][0].WorksiteDesignInTimeNotFinished;
var ValueWorksiteDesignOutOfTimeNotFinished = window["HRDDeadlinesByWorkstite_QueryModel"][0].WorksiteDesignOutOfTimeNotFinished;
var ValueWorksiteRoadConstructionInTimeNotFinished = window["HRDDeadlinesByWorkstite_QueryModel"][0].WorksiteRoadConstructionInTimeNotFinished;
var ValueWorksiteRoadConstructionOutOfTimeNotFinished = window["HRDDeadlinesByWorkstite_QueryModel"][0].WorksiteRoadConstructionOutOfTimeNotFinished;
var ctx = document.getElementById('chart1').getContext('2d');
var data = {
labels: ['W terminie', 'Opóźnione'],
datasets: [
{
label: 'Dataset 1',
data: [ValueWorksiteDesignInTimeNotFinished, ValueWorksiteDesignOutOfTimeNotFinished],
backgroundColor: [
'rgba(0, 255, 34, 0.75)',
'rgba(255, 183, 183, 0.75)',
],
}
]
};
var config = {
type: 'doughnut',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
},
title: {
display: false,
}
}
},
};
}
new Chart(ctx, config);
//
var ctx = document.getElementById('chart2').getContext('2d');
var dataWorksiteRoadConstruction = {
labels: ['W terminie', 'Opóźnione'],
datasets: [
{
label: 'Dataset 2',
data: [ValueWorksiteRoadConstructionInTimeNotFinished, ValueWorksiteRoadConstructionOutOfTimeNotFinished],
backgroundColor: [
'rgba(0, 255, 34, 0.75)',
'rgba(255, 183, 183, 0.75)',
],
}
]
};
var configWorksiteRoadConstruction = {
type: 'doughnut',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
},
title: {
display: false,
}
}
},
};
new Chart(ctx, config);
Wynik końcowy:
Przykład wykresu liniowego w kolumnie HTML
Szablon HTML:
<div rowHtmlElement="thisChart" style="width: 300px;">
<canvas id="doughnutChartForm_{@Id}"></canvas>
</div>
Kod Javascript:
var chartId = 'doughnutChartForm_' + RowDataContext.Id;
var ctx = document.getElementById(chartId).getContext('2d');
var data = {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{
label: 'Sales by quater,
data: [
RowDataContext.Column1_SQLName,
RowDataContext.Column2_SQLName,
RowDataContext.Column3_SQLName,
RowDataContext.Column4_SQLName
]
}
]
};
var config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Chart'
}
}
},
};
new Chart(ctx, config);
Powiązane tematy: