Saya mencoba menampilkan lebih banyak grafik Chart.js pada satu halaman HTML, tetapi tidak berhasil. Saya mencoba beberapa pendekatan, tetapi tidak satupun dari mereka memiliki hasil yang positif. Saya akan melampirkan kode saya:

@extends('layouts.app')

<!DOCTYPE html>
<html lang="zxx">
@section('content')
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/patternomaly@1.3.2/dist/patternomaly.min.js"></script>


    @php
    $dates = '';
    $rates = '';
    $graph_data = \App\Helpers\NjHelper::bettingData();
    foreach ($graph_data as $item){
    $dates .= "'".$item->date."',";
    $rates .= $item->bankers.",";
    }
    @endphp

    @php
    $datesValue = '';
    $ratesValue = '';
    $graph_data_value = \App\Helpers\NjHelper::bettingDataValueBets();
    foreach ($graph_data_value as $item){
    $datesValue .= "'".$item->date."',";
    $ratesValue .= $item->value_bet.",";
    }
    @endphp

<script>
$(function () {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [{!! $dates !!}],
        datasets: [{

            label: 'Bankers Profit Per Day',
            data: [{!! $rates !!}],

            borderColor: [
                'rgba(243, 156, 18, 1)',
                'rgba(243, 156, 18, 1)',
                'rgba(243, 156, 18, 1)'
            ],
            borderWidth: 3
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        legend: {
            labels: {

                fontSize: 20
            }
        }
    }
});



var ctx_2 = document.getElementById(chartValueBets).getContext('2d');
var chartValueBets = new Chart(ctx_2, {
    type: 'line',
    data: {
        labels: [{!! $datesValue !!}],
        datasets: [{

            label: 'Value Bets Profit Per Day',
            data: [{!! $ratesValue !!}],

            borderColor: [
                'rgba(243, 156, 18, 1)',
                'rgba(243, 156, 18, 1)',
                'rgba(243, 156, 18, 1)'
            ],
            borderWidth: 3
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        legend: {
            labels: {

                fontSize: 20
            }
        }
    }
});
});
</script>
</head>
<div class="col-lg-12 col-xl-4">


        <canvas id="myChart" width="400" height="400"></canvas>
        <canvas id="chartValueBets" width="400" height="400"></canvas>
        </div>
@endsection
</html>

Data yang ingin saya tampilkan berasal dari beberapa query SQL, inilah alasan mengapa saya memiliki dua bagian @php sebelum grafik.

Hanya bagan pertama yang muncul di halaman HTML saya, bagan dengan nama "myChart".

Adakah yang tahu apa yang bisa saya lakukan untuk membuat yang kedua muncul juga?

0
Maria1995 5 Maret 2020, 02:22

1 menjawab

Jawaban Terbaik

Pada baris berikut:

var ctx_2 = document.getElementById(chartValueBets).getContext('2d');

Anda kehilangan tanda kutip di sekitar "chartValueBets." Jika Anda menambahkan tanda kutip, itu akan berfungsi dengan baik.

1
danielhep 4 Maret 2020, 23:26