从远程 JSON 填充 Jqplot
Populate Jqplot from remote JSON
我正在尝试从PHP文件中的外部JSON填充条形图。我尝试使用 AJAX 和 getJSON 函数来执行此操作,但仍然无法生成图表。
以下是我的 JSON 格式的样子:
[
{
"NAME": "a chart",
"VALUES": "[[439, 233, 233, 495],[292, 360, 262, 173],[222, 95, 27, 27]]"
}
]
这是javascript:
$(document).ready(function() {
urlDataJSON = 'data.php';
$.getJSON(urlDataJSON, function (data) {
console.log(data.output);
var dataLabels = ['base', 'key', 'pacing', 'emerging'];
var dataLines = json[0].VALUES;
var chartTitle = json[0].NAME;
$.jqplot('chart2', dataLines, {
legend: {
show: true
},
title: chartTitle,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'e',
edgeTolerance: -15
},
shadowAngle: 135,
renderOptions: {
barDirection: 'horizontal'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: dataLabels
}
}
});
});
你们知道我上面的代码有什么问题吗?如果有的话,请告诉我。
编辑:更新的代码
var urlDataJSON = 'data.php';
/* var json = [{
"Name": "Poll Results",
"Serie": [[2, 5, 4], [4, 1, 7], [6, 3, 1], [3, 4, 2]]}];*/
$.getJSON(urlDataJSON, function (data) {
console.log(data);
var tick = ['asd','fsdf','asda','fdsf',];
var dataLines = [];
var title = [];
$.each(data, function (entryindex, entry) {
dataLines.push(entry['VALUES']);
title.push(entry['NAME']);
});
var options = {
legend: {
show: true
},
title: 'Poll Results',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'e',
edgeTolerance: -15
},
shadowAngle: 135,
renderOptions: {
barDirection: 'horizontal'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tick
}
}
};
var plot = $.jqplot('chart2', [dataLines], options);
});
我已经放置了 .each() 函数将数据推送到数组中。现在,图形为空。仅显示背景。
$(document).ready(function() {
$.getJSON('data.php', function (data) {
var tick = ['asd','fsdf','asda','fdsf'];
var options = {
legend: {
show: true
},
title: 'Poll Results',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'e',
edgeTolerance: -15
},
shadowAngle: 135,
renderOptions: {
barDirection: 'horizontal'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tick
}
}
};
var plot = $.jqplot('chart2', data[0].VALUES, options);
});
});
确保包含这些插件
<script type="text/javascript" src="../src/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.pointLabels.min.js"></script>
这是我的数据.php
$arr = [
"NAME" => "a chart",
"VALUES" => [[439, 233, 233, 495],[292, 360, 262, 173],[222, 95, 27, 27]]
];
header('Content-Type: application/json');
print json_encode([$arr]);
相关文章:
- 如何设置html元素填充的动画
- 如何使用jquery在填充自动完成的值后使文本框只读
- 如何通过ajax刷新JSF填充的javascript变量
- 用与线条相同的颜色填充多折线图上的点
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 用我的json数据填充JQuery DataTable
- 使用 jQuery 检查所有值是否为空或已填充
- 为什么不't我的变量在我的控制器中填充后在我的视图中呈现
- 跟踪jqplot垂直折线图的鼠标位置
- 如何让typeahead在我的搜索栏中填充自定义参数
- 如何使用JSON字符串中的jQuery填充下拉框
- 动态填充两个下拉菜单
- 如何将CSS(特别是填充/边距)应用于select下拉菜单的选项或optgroup
- spine.js在启动时填充模型实例
- 如何将要单独填充的每个HTML画布路径/形状分开
- CSS赢得't填充视图端口
- 从JSON填充列表(而不是HTML)
- 从远程 JSON 填充 Jqplot
- 动态填充 jqPlot 图表的多维数组