为了账号安全,请及时绑定邮箱和手机立即绑定

无法在一个 HTML 页面上显示两个 Chart.js

无法在一个 HTML 页面上显示两个 Chart.js

Go
月关宝盒 2023-08-21 15:06:06
我试图在单个 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”周围缺少引号。如果添加引号,它应该可以正常工作。


查看完整回答
反对 回复 2023-08-21
  • 1 回答
  • 0 关注
  • 123 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信