无法在一个 HTML 页面上显示两个 Chart.js
我试图在单个 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
在下面一行：var ctx_2 = document.getElementById(chartValueBets).getContext('2d');“chartValueBets”周围缺少引号。如果添加引号，它应该可以正常工作。
随时随地看视频慕课网APP
相关分类
Go