个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试使用 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
我有一个通过 Google Charts Org Chart API 呈现的图表。当用户单击节点时，如何获取有关所选节点的数据。我理解到我进行“getSelection”调用以将选择信息输出到 Jav
我使用Chart.js显示雷达图。我的问题是某些标签很长: 图表无法显示或显得很小。 那么，有没有办法换行或为标签分配最大宽度？ 感谢您的帮助! 最佳答案 对于Chart.js 2.0+，您可以使用数
我想问一下使用Chart.js http://www.chartjs.org/ 可以吗？获得组合条形图和折线图？ 感谢您的任何建议。 最佳答案 下面的答案与chart.js 1.x有关。 Chart.
我在addData和removeData函数中添加了chart.resize()，但它总是增加高度并且永远不会减少! 当用户单击菜单项时，我正在更新图表。有些项目有超过 100 个数据，有些项目只有
horizontal bar chart var barOptions_stacked1 = { tooltips: { e
我们将 Chart.js 与 clojurescript 和 Reagent 一起使用。现在我知道 Chart.js 有一个 Chart.update() 方法来用新数据更新图表。所以问题是，如何设置
我想显示一个包含多个数据集的条形图，如下所示，。。我可以获取如下所示的数据。。而是如何转换这个JSON数组，如下所示。我需要显示过去7天每个班次的出勤百分比。。感谢你在这方面的帮助。谢谢!。=编辑=
I want to display a bar chart with multiple datasets as shown below,我想显示一个包含多个数据集的条形图，如下所示， I'
假设我有一个 Charting.Chart : 我想导出到 Excel.Workbook.Worksheet以便我稍后可以“播放”数据(例如在 Excel 图表上拖放更多数据等): 请不要介意第二张图
离子性： ionic（Ionic CLI）：4.10.3（/Users/faiz/.nvm/versions/node/v8.9.4/lib/node_modules/ionic） 离子框架：离子角3
我正在使用Chart.js来可视化我的数据，如下图所示。。。我想在图表中间加一张照片。。。如何在甜甜圈图表的中间添加照片？下面是我的javascript代码：
我正在使用 Kendo 饼图，我想将其配置为在没有数据可显示时显示一条消息。我正在使用以下 js 函数配置饼图 - 变量“JsPieChartDataSet”是一组 JSON 格式的数据。 是否有可以
是否可以在图表和x轴之间获得更多空间？ 是否可以在图表的右侧和 Canvas 区域的末端之间留出更多的空间？我想在图表旁边的 Canvas 中添加更多元素，但是这是不可能的，因为图表占用了整个 Can
我正在使用chart.js，在图表的某些点的多日条目之间缺少一些数据。我已将这些值分配为null，但希望图表在缺失点之间绘制一条连接线。这是我所拥有的： 有没有办法将chart.js中的点连接起来？也
我正在生成一些谷歌图表，但我被困在这里。 Google 允许您将列堆叠起来。但它要么受到限制，要么我无法将其配置为工作。取自谷歌，这里有一个例子，显示了两个国家每年生产的咖啡杯数: 假设我有另一个相同
使用 Google Charts 条形图，是否可以更改一个条形的颜色。例如，我想将 2006 年的数据设为红色(其他条形为蓝色)。 function drawVisualization() {
我目前正在尝试重新设计设计布局。我通过尝试和错误得到了大部分。我唯一不明白的部分是: 1.) 左侧和底部的黑色轴。所以只有那些是黑色的2.) 里面的浅灰色轴。如何在颜色上应用不透明度或使用我自己的颜色
我使用以下命令创建了一个名为“abc”的 Helm 图表helm create abc现在，当我安装此图表时，所有创建的kuberenets资源将具有一个包含“abc”的名称。 现在，我必须将图表“a
我正在构建一个折线图，除了 ChartScrollbar 中的标签之外，一切正常，因为类别名称有点长，cahrtScrollbar 中的标签相互堆叠使其无法读取。我想知道是否可以隐藏标签、仅显示一些标
我正在使用 Chart.js 2.5。我的情况是，我有一个包含 40 个数据的数据集，但我只想在折线图中显示 7 个数据，但仍然可以水平向左/向右移动以发现其余数据。 我尝试了ticks.maxTic
我是一名优秀的程序员,十分优秀！