1. Tudásbázis
  2. Modulok fejlesztése
  3. D8: inline JS (chartjs.org)

D8: inline JS (chartjs.org)

Beküldte makgab - 2018. november 16. 18.33
makgab képe

Üdv!
Adatok megjelenítéséhez használnám a chartjs.org-ot. (Statikusan működik is.)
A Chart.js kell és egy dinamikusan generált js.
Ezt hogyan érdemes?
Így próbáltam:

# mymodule.libraries.yml:
...
mymodule.datajs:
version: 1.x
header: true
js:
  js/Chart.js: {}
...

# src/Controller/MyController.php:
...
public function data() {
 
// inline JS
$html = "<div><canvas id=\"myChart\"></canvas></div>
<script>
var ctx = document.getElemetnById('myChart');
...
// ide kell generálni a dinamikus kódot
...
</script>
";
 
$build['data_view'] = [
  '#type' = 'markup',
  '#markup' = $html,
];
 
$build['data_view']['#attached']['library'][] = 'mymodule/mymodule.datajs';
return $build;
}
...

A Chart.js betöltődik, ez jó! Viszont az inline JS megjelenik az oldalon (a JS kód). A script tag-et (meg a div-et) leveszi a rendszer. Hogyan lehet a dinamikus inline JS-t betenni? Ne 'markup'-ot használjak?

Drupal verzió: 
8.x
Fórum: 
Modulok fejlesztése
HF leon képe

Beküldte HF leon - 2018. november 16. 21.48

Ne. Ne a #markup típust használd.
Render arrays

1
0
makgab képe

Beküldte makgab - 2018. november 16. 22.25

Pontosan merre induljak el a render arrays témában?
Tudnál egy kicsit segíteni?

0
0
HF leon képe

Beküldte HF leon - 2018. november 16. 23.35

Több módszer van a modulokból a megjelenítés kezdeményezésére. Ez egy hosszú téma, sok lehetőség van. Az igények döntik el mire van szükséged, sőt egyedi apik is készíthetők.

Rákerestem a chartjs-re. Sajnos valóban nincs kész megoldás drupal 8 alá.
https://www.drupal.org/project/chartjs_api is csak fejlesztői verzió, de talán érdemes ránézned.

Egyébként az adott twig témát is át lehet szerkeszteni (az adott mezőhöz egyedi twig-et készíthetsz), talán ez a legegyszerűbb, de kevésbé elegáns megoldás. A chartjs_api felhasználásával, már kiterjedtebbek a lehetőségek.

Nemrég ajánlottak itt egy remek kis könyvet a témában:
https://www.packtpub.com/web-development/drupal-8-module-development

1
0
makgab képe

Beküldte makgab - 2018. november 18. 08.16

Szépen működik a dev is.

# example:
# Bar graph.
$build['mychart'] = [
  '#data' => [
    'labels' => ['January', 'February', 'March'],  // <-- dinamikus adatok ide
    'datasets' => [
      [
        'label' => 'Dataset 1',
        'data' => [180, 500, 300],  // <-- dinamikus adatok ide
        'backgroundColor' => ['#00557f', '#00557f', '#00557f'],
        'hoverBackgroundColor' => ['#004060', '#004060', '#004060'],
      ],
      [
        'label' => 'Dataset 2',
        'data' => [200, 180, 400],  // <-- dinamikus adatok ide
        'backgroundColor' => ['#f8413c', '#f8413c', '#f8413c'],
        'hoverBackgroundColor' => ['#9b2926', '#9b2926', '#9b2926'],
      ],
    ],
  ],
  '#graph_type' => 'bar',
  '#id' => 'mychart',
  '#type' => 'chartjs_api',
];
1
0