Chart.js w Symfony3

pytanie zadane 6 października 2018 w JavaScript przez Piotr Zakrzewski Obywatel (1,260 p.)

Witam !

Wyciągam z bazy temperature, wilgotność i czas w jakiej to zostało wysłane z raspberry

Chciałbym to wyświetlić w wykresach, długo szukając czegoś w necie wpadłem a Chart.js który wydaje się dosyć prosty do implementacji a potem dostosowania pod moje potrzeby...

Jednak cały czas konsola zwraca mi blad

Uncaught ReferenceError: Chart is not defined

Zauważyłem że w dokumentacji też jest wspomniane cos o require ale mimo że dodalem require.js do mojego projektu to on i tak mi wywala blad ze

Uncaught ReferenceError: require is not defined

{% block javascripts %}
            <script type="module" src="{{asset('bundles/chartjs/dist/Chart.js')}}"></script>
<script>
  
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

</script>
{% endblock %}

{% block body %}

 <canvas id="myChart" width="400" height="400"></canvas>

{% endblock %}

3 odpowiedzi

odpowiedź 6 października 2018 przez CenterPL Pasjonat (19,070 p.)

Tak kompletnie na szybko, próbowałeś użyć cdn'a zamiast statycznego pliku? https://cdnjs.com/libraries/Chart.js, bo inne co mi przychodzi do głowy to zła ścieżka podana w funkcji asset()

Require nie jest wymagany raczej.

komentarz 6 października 2018 przez Piotr Zakrzewski Obywatel (1,260 p.)
edycja 6 października 2018 przez Piotr Zakrzewski

Przy pierwszym uruchomieniu konsola zwracala blad ze nie mozna odnalesc wskazanego pliku, po poprawce literowki blad zniknal wiec raczej twierdze ze jest poprawna.

Niestety sciezka z internetu odpada, projekt budowany jest w sieci wewnetrznej i jakie kolwiek podlaczenie pod skrypty przez internet wywala bledy:

An exception has been thrown during the rendering of a template ("Unable to generate a URL for the named route "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js" as such route does not exist.").

Edit: Przezucilem link do szablonu w ktorym beda wykresy, blad zniknal ale nic sie nie pojawia.

Edit2 gdy ustawie script tuz za canvas znow mam blad ze Uncaught ReferenceError: Chart is not defined

odpowiedź 6 października 2018 przez Tomek Sochacki Ekspert (227,490 p.)

Tu masz jakiś przykładowy link do libki:

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js

i weź to dodaj normalnie po prostu jako script przed wywołaniem Twojego skryptu korzystającego z libki.

komentarz 6 października 2018 przez Tomek Sochacki Ekspert (227,490 p.)

A jeśli wykorzystujesz częściej w kodzie chart to w ogóle wziąłbym go sobie lokalnie i podał klientowi w całym bundlu js, ale to już zależy od częstotliwości używania na różnych routingach i od wielkości całego bundla jaki by wtedy powstał.