我试图在单个 HTML 页面上显示更多 Chart.js 图形,但它不起作用。我尝试了几种方法,但都没有取得积极的结果。我将附上我的代码:@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 } } }});我想要显示的数据来自一些 SQL 查询,这就是为什么我在图表之前有这两个 @php 部分的原因。我的 HTML 页面上仅显示第一个图表,即名称为“myChart”的图表。有谁知道我可以做什么才能让第二个也出现?
1 回答
繁星coding
TA贡献1797条经验 获得超4个赞
在下面一行:
var ctx_2 = document.getElementById(chartValueBets).getContext('2d');
“chartValueBets”周围缺少引号。如果添加引号,它应该可以正常工作。
- 1 回答
- 0 关注
- 119 浏览
添加回答
举报
0/150
提交
取消