highchars项目中的实战，与ajax结合接收后台传过来的数据

来源：互联网发布：vc编程软件编辑：程序博客网时间：2024/05/16 03:03

不多说，直接上代码：

ajax部分：

$.ajax({        type:'post',        url:path+'/terminal4gController/selectTerminal4g.do',    dataType:'json',  async: false,data: datas,success:function(result){myStore.removeAll();dataSource = result.multipleAnalyseList;for (var i = 0;i<dataSource.length;i++){seriesData[i] = new Array(dataSource[i].app_name, dataSource[i].consumptionFlow_size);}}    });

highchars图像展示部分：

function showView(viewType){var char = new Highcharts.Chart({//HighCharts中chart属性配置  chart: {              renderTo: 'information_date',//div 标签              type: viewType,//图表类型                            /******************以下chart配置可选******************/              backgroundColor:"#FFFFFF",//图表背景色              borderWidth:5,//图表边框宽度              borderRadius:15,//图表边框圆角角度              plotBackgroundColor:"#FFFFFF",//主图表区背景颜色              plotBorderColor:'red',//主图表边框颜色              plotBorderWidth:2,//主图表边框宽度              shadow:true,//是否设置阴影              zoomType:'xy'//拖动鼠标放大图表的方向            },          title: {              text: '指标报表'          },          subtitle: {//              text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'          text: '西安海润'          },          xAxis: {              type: 'category',              labels: {                  rotation: -45,                  style: {                      fontSize: '13px',                      fontFamily: 'Verdana, sans-serif'                  }              }          },          yAxis: {              min: 0,              title: {                  text: '流量 (KB)'              }          },          legend: {              enabled: false          },          tooltip: {              pointFormat: 'Population in 2015: <b>{point.y:.1f} KB</b>'          },          series: [{              name: 'Population',              data: seriesData,              dataLabels: {                  enabled: true,                  rotation: -90,                  color: '#FFFFFF',                  align: 'right',//                  format: '{point.y:.1f}', // one decimal                  y: 10, // 10 pixels down from the top                  style: {                      fontSize: '13px',                      fontFamily: 'Verdana, sans-serif'                  }              }          }]});}

0 0