gpt4 book ai didi

javascript - 如何使用 jQuery 加载包含 Chart.js 的页面

转载 作者:行者123 更新时间:2023-11-28 06:31:39 25 4
gpt4 key购买 nike

我正在尝试使用 jQuery load() 函数将包含图表的页面加载到另一个页面上的 div 元素中。我读过jquery load with chart.js这建议将图表初始化放在完整的回调中。但是,这对我不起作用,因为我的图表标签和数据集是由 PHP 脚本以及页面上的其他几个元素生成的。

这是我的页面上包含图表的代码:

<?php 
/*
lots of PHP code here that loads the data to display
final variables generated are $labelsString and $dataSetsString
$labelsString contains the labels for the chart in the form: "label1","label2","label3" etc.
$dataSetsString contains the data sets to show in the form:

{
label: "Line1",
fillColor: "rgba(0,0,0,0)",
strokeColor: "rgba(1,2,3,4)",
pointColor: "rgba(1,2,3,4)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(1,2,3,4)",
data: [1,2,3]
},
{
label: "Line2",
fillColor: "rgba(0,0,0,0)",
strokeColor: "rgba(1,2,3,4)",
pointColor: "rgba(1,2,3,4)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(1,2,3,4)",
data: [4,5,6]
}
/*
?>



<div style="height: 100%; width: 100%;">
OTHER HTML CONTENT HERE

<div style="height: 50%;">
<canvas id="canvas"></canvas>
</div>

OTHER HTML CONTENT HERE
</div>


<script type="text/javascript">

alert("Got here 1");

/*
For config options see: http://www.chartjs.org/docs/
*/

var lineChartData = {
labels : [<?php echo $labelsString; ?>],
datasets : [
<?php
echo $dataSetsString;
?>
]

}

alert("Got here 2");

function loadChart(){

alert("Got here 2A");

var ctx = document.getElementById("canvas").getContext("2d");

alert("Got here 2B");

window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
animation: false,
pointDot : false,
pointDotRadius : 2,
pointDotStrokeWidth : 1,
pointHitDetectionRadius : 10,
scaleShowGridLines : false,
scaleGridLineColor : "rgba(0,0,0,.1)",
scaleBeginAtZero: true,
bezierCurve : false,
bezierCurveTension : .2,
showScale: true,
scaleShowLabels: true,
scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
scaleFontSize: 10,
scaleFontStyle: "normal",
scaleFontColor: "#666",
maintainAspectRatio: false
});

alert("Got here 2C");
}

loadChart();

alert("Got here 3");

</script>

调用此页面的代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>

<script type="text/javascript" src="../jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../chartjs/Chart.js-master/Chart.js"></script>

<style type="text/css">
</style>

</head>

<body>

<div id="chartArea" class="chartArea"></div>

<script type="text/javascript">

function loadGo()
{
$("#chartArea").load("../page.php?foo=bar");
}

loadGo();

</script>

</body>
</html>

当我加载页面时,我的 JS 调试警报会弹出:1、2、2A、2B。调试警报 2C 和 3 不会弹出。当我在浏览器中打开包含图表的页面时,图表加载得很好。是什么导致 Chart.js 无法正常执行?

更新:我添加了另一个调试警报框 2B(并将旧的 2B 更改为 2C)。 2B 在以下行之后执行:

var ctx = document.getElementById("canvas").getContext("2d");

所以执行在该行的某个地方结束:

window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
animation: false,
pointDot : false,
pointDotRadius : 2,
pointDotStrokeWidth : 1,
pointHitDetectionRadius : 10,
scaleShowGridLines : false,
scaleGridLineColor : "rgba(0,0,0,.1)",
scaleBeginAtZero: true,
bezierCurve : false,
bezierCurveTension : .2,
showScale: true,
scaleShowLabels: true,
scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
scaleFontSize: 10,
scaleFontStyle: "normal",
scaleFontColor: "#666",
maintainAspectRatio: false
});

有什么想法吗?

最佳答案

事实证明,问题不在于 Chart.js,而在于 jQuery 限制“不在我的服务器上”的页面。要加载的页面(包含图表)使用 PHP 中的 file_get_contents() 来加载位于另一台服务器上的一些外部 JSON 数据。我猜我的浏览器以某种方式识别出数据是从“外部”服务器加载的,并且不允许显示数据。

关于javascript - 如何使用 jQuery 加载包含 Chart.js 的页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34666641/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com