我試圖在單個(gè) HTML 頁(yè)面上顯示更多 Chart.js 圖形，但它不起作用。我嘗試了幾種方法，但都沒有取得積極的結(jié)果。我將附上我的代碼：@extends('layouts.app')<!DOCTYPE html><html>@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 } } }});我想要顯示的數(shù)據(jù)來自一些 SQL 查詢，這就是為什么我在圖表之前有這兩個(gè) @php 部分的原因。我的 HTML 頁(yè)面上僅顯示第一個(gè)圖表，即名稱為“myChart”的圖表。有誰(shuí)知道我可以做什么才能讓第二個(gè)也出現(xiàn)？
無(wú)法在一個(gè) HTML 頁(yè)面上顯示兩個(gè) Chart.js
月關(guān)寶盒
2023-08-21 15:06:06
