highcharts图表使用ajax调用数据

前端之家收集整理的这篇文章主要介绍了highcharts图表使用ajax调用数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用 series.setData(data); 可是实现数据的重新指定!

在highcharts.js文件中你可以查看他的一些方法

<!DOCTYPE HTML><html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>物理内存</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript">$(function () { function requestData() { $.getJSON('p.PHP?act=rt&callback=?',displayData); } function displayData(dataJSON) { var series = chart.series; var user = parseFloat(dataJSON.UsedMemory);//已用 parseInt-转为数字 var userno = parseFloat(dataJSON.FreeMemory);//空闲 series[0].name = '内存'; data = [{"name":"已用","y":user,},{"name":"空闲","y":userno,}]; series[0].setData(data); } chart = new Highcharts.Chart({ chart: { renderTo: 'container',type: 'pie',plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,events:{ load:requestData } },title: { text: '物理内存使用情况' },tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },plotOptions: { pie: { allowPointSelect: true,cursor: 'pointer',dataLabels: { enabled: true,color: '#000000',connectorColor: '#000000',format: '<b>{point.name}</b>: {point.percentage:.1f} %' } } },series: [{}]//-------------加了大括号。。 {} }); }); </script> </head> <body><script src="js/hc.js"></script><script src="js/modules/exporting.js"></script><div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body></html>

原文链接:https://www.f2er.com/ajax/165487.html

猜你在找的Ajax相关文章