javascript - 如何将 php 变量传递给 .js 文件以创建函数 Chart
问题描述
我已经创建了我的图表,但我不知道如何传递它,我已经尝试使用?php 但它不起作用.. 我已经在下面定义了头部,但是当我尝试传递它时。返回“''”的 php 文件,如函数工具提示标题
<script src="includes/templates/chart.js"></script>
图表.js
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['08:00'] , //Jamnya
datasets: [{
backgroundColor: 'rgba(85, 212, 226, 0.2)',
borderColor: '#55d4e2',
label: '<?php echo $dtDateChart1; ?>' ,
data: [600],
fill: true,
pointRadius: 5,
pointHoverRadius: 10,
showLine: true
}]
}, options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Total Online Today',
position: 'top',
fontSize: 15,
fontStyle: 'bold'
},
legend: {
display: false
},
elements: {
point: {
pointStyle: 'circle'
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'TIME'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'TOTAL ONLINE'
}
}]
},
tooltips:{
callbacks: {
title: function(tooltipItem, data) {
return '<?php echo $dtDateChart1; ?>' +data['labels'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return 'TOTAL : '+data['datasets'][0]['data'][tooltipItem['index']]+'';
},
},
titleFontSize: 15,
bodyFontSize: 15,
displayColors: false
}
}
}
);
return myChart;
}
在我的 php 文件中
$out .= ' <canvas id="myChart2" class="canpas chartjs-render-monitor" style="display: block; width: 454px; height: 300px;" width="454" height="300"></canvas>';
这是我想传递给我的 .js 的变量
//result chart1
@mssql_free_result($graph_query2);
$dtDateChart1 = $dateTittleChart1;
$convertChart1 = json_encode($datesChart1);
$totalChart1 = json_encode($nMaxChart1);
$labelChart1 = $convertChart1;
当我已经成功 getelementbyid 时,我不知道如何通过它,如果你知道一些我应该知道的事情,谢谢你。我对javascript传递变量了解不多。
解决方案
您不应该在 js 文件中包含 php 代码。
你可以做的是:
- 在 php 文件中,将您需要的值传递给 js 变量。
- 然后,使用全局 js 变量或将它们作为参数传递给 js 函数。
或者,不包含单独的charts.js 文件,而是将charts.js 的内容包含在<script>
标签内的php 文件中。这样你就可以像你一样拥有 php 和 js。
推荐阅读
- django - 如何从 django 测试中跳过虚拟模型
- python - 使用 python 或 numpy 而不是 pandas 填充列表列表中的空元素
- ios - FirebaseInstallations 无法与当前版本的 Firebase 实例 ID 一起正常工作。请更新您的 Firebase 实例 ID 版本
- python - 对特定集合使用自定义比较器
- c++ - getline 函数上的错误没有实例与参数匹配
- python - 使用 Zeugma:发生异常:AttributeError The vocab attribute was removed from KeyedVector in Gensim 4.0.0
- python - 如何过滤 django 模型的相关模型行?
- python - 我想让这段代码只针对一个角色,我该怎么做?
- javascript - 为什么 match() 即使匹配数据也不起作用
- forms - 子表单总是排在记录集中的第一个 - 我需要最后一个