highcharts延遲加載及刷新數據
阿新 • • 發佈:2017-09-11
引入 art gen -1 new nta title con 訪問
默認使用方法及配置:
<div id="container" style="min-width:400px;height:400px"></div>
$(function () { $(‘#container‘).highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text:‘2014 某網站上各個瀏覽器的訪問量占比‘ }, tooltip: { headerFormat: ‘{series.name}<br>‘, pointFormat: ‘{point.name}: <b>{point.percentage:.1f}%</b>‘ }, plotOptions: { pie: { allowPointSelect: true, cursor:‘pointer‘, dataLabels: { enabled: false }, showInLegend: true } }, series: [{ type: ‘pie‘, name: ‘瀏覽器訪問量占比‘, data: [ [‘Firefox‘, 45.0], [‘IE‘, 26.8], { name: ‘Chrome‘, y: 12.8, sliced: true, selected: true }, [‘Safari‘, 8.5], [‘Opera‘, 6.2], [‘其他‘, 0.7] ] }] }); });
引入的js文件暫不顯示
默認效果如圖:
思路: 如要修改延遲加載及刷新數據為方式:
則可以先配置好默認的信息存放在option中,最後在填充數據,在調用highcharts的var chart = new Highcharts.Chart(options);渲染圖形
eg:
var options = { chart: { renderTo: ‘container‘, plotBackgroundColor: null, plotBorderWidth: null, marginLeft: 0, plotShadow: false }, title: { text: ‘ ‘, useHTML: true }, tooltip: { pointFormat: ‘<b>{point.name}</b>‘//鼠標上浮顯示數據格式 }, exporting: {//導出按鈕 enabled: false }, plotOptions: { pie: { allowPointSelect: true, cursor: ‘pointer‘, dataLabels: { enabled: true, format: ‘<b>{point.name}</b>‘, //顯示說明的樣式 style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || ‘black‘//顏色 } }, showInLegend: true } }, series: [{ type: ‘pie‘,//餅圖 name: ‘詳情‘, data: [] //默認為空數據 }] }; function freshPage(dataJson){ options.series[0].data = dataJson;//填充數據 var chart = new Highcharts.Chart(options);//渲染圖形 }
//調用代碼如下
var data=[{name:‘test1‘,y:30},{name:‘test2‘,y:18}]//測試數據 freshPage(data);
效果:
Ps:異步獲取的數據若為字符串格式的json類型數據,可能需要通過 json.parse() 或者 eval(data)函數轉化一下
刷新改變數據測試:
1.頁面添加按鈕:
<input type=‘button‘ value="改變數據" onclick="changeData()"/>
2.添加事件函數
function changeData(){ var data=[{name:‘test3‘,y:70},{name:‘test4‘,y:30}] options.series[0].data = data; var chart = new Highcharts.Chart(options); }
效果:
上文中的數據 應用於異步獲取數據同樣有效
例如可修改為:
$.post(url,[],function(data){ data=eval(data);//傳過來的字符串需要格式化為json freshPage(data); })
highcharts延遲加載及刷新數據