使用laravel和ajax加载高图表数据
Load highcharts data with laravel and ajax
我在为高图表加载数据时遇到了这个问题。
从我的控制器的响应中,我得到了以下数据:
[['Doctorado', 91.86],['Maestría', 6.98],['Licenciatura', 1.16]]
ajax的调用运行良好,但是图表没有显示。
编辑:我几乎成功了,但是有点奇怪。ajax的整个代码是:
<script type="text/javascript">
function handleData( responseData ) {
// do what you want with the data
console.log('Inside handle data function: ' + responseData);
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Investigadores por grado académico'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
},
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: 'Porcentaje:',
data: responseData/*THE DATA ARE NOT WELL RECEIVED HERE. But if i type "[['Doctorado', 91.86],['Maestría', 6.98],['Licenciatura', 1.16]]" directly, it does work! So why with the variable it doesn't work?*/
}]
});//Fin de la función de highcharts
}
$(document).ready(function() {
$.ajax({
url: '{{URL::route("query01")}}',
type: 'GET',
async: true,
dataType: 'text',
success: function(datos,status, XHR) {
console.log('Data inside ajax is: ' + datos);
handleData(datos);
}
});
});
</script>
这不起作用,因为数据在某种程度上没有得到很好的接收,因为如果我使用包含数据的ResponseData变量,图表将不会显示,但是,如果我直接写入字符串
[['Doctorado', 91.86],['Maestría', 6.98],['Licenciatura', 1.16]]
它确实有效。事实上,在console.log中,我看到变量responseData
确实有那个数据字符串!
console.log():
Data inside ajax is: [['Doctorado', 91.86],['Maestría', 6.98],['Licenciatura', 1.16]]
Inside handle data function: [['Doctorado', 91.86],['Maestría', 6.98],['Licenciatura', 1.16]]
饼图显示不正确。我只能看到几行字,上面写着切片0.0%有什么想法吗?
在第一次列出此代码时
$(function () {
表示事件"文档就绪"
在第二个列表中,您在哪里调用函数grafica
?正如我所看到的,您需要在ajax success
函数
相关文章:
- 如何访问高图表工具提示中的任何特定数据
- 高图表数据导入 JSON - 格式
- 高图表不显示来自csv文件的数据
- 高图表数据标签重叠
- 删除高图表数据标签上的阴影/背景发光
- 如何在高图表中设置动态数据
- 将不同的符号添加到具有动态数据的高图表中
- 使用节点下载高图表数据,但不在浏览器中显示
- 使用laravel和ajax加载高图表数据
- 在高图表中按类别对子体数据进行排序
- 动态显示实时高图表数据,无需警报
- 使用 CSV 文件预处理高图表数据
- 在高图表数据中使用字符串
- 在没有解析 JSON 的情况下获取高图表数据
- 高图表数据减少一天
- 高图表数据集数组
- 如何使用十字准线在 x 轴上设置高图表数据系列
- 如何组合高图表数据
- 动态填充高图表数据
- 高图表:数据更新后,同步图表不再同步