关于图表的技术分享.docxVIP

关于HighCharts图表的技术分享简单的HighCharts的折线图前台的实现方法：htmlheadmeta charset=UTF-8 /script src=/libs/jquery/2.1.4/jquery.min.js/scriptscript src=/highcharts.js/script/headbodydiv id=container style=width: 550px; height: 400px; margin: 0 auto/divscript language=JavaScript$(document).ready(function() { var title = { text: 每月平均温度 }; var subtitle = { text: Source: }; var xAxis = { categories: [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec] }; var yAxis = { title: { text: Temperature (\xB0C) } }; var plotOptions = { line: { dataLabels: { enabled: true//该值为true的时候，就是在折线上显示数值，反之，则不显示。 }, enableMouseTracking: false//鼠标经过时，是否显示，true显示，false为不显示。 } }; var series= [{ name: Tokyo, data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: London, data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] } ]; var json = {}; json.title = title;//标题 json.subtitle = subtitle;//标题的额外标注 json.xAxis = xAxis;//X轴的具体显示信息 json.yAxis = yAxis;//Y轴的显示的单位信息 json.series = series;//折线的具体信息（包含名字和其每个点的数值） json.plotOptions = plotOptions;//调整显示效果（默认是不显示折线数值，鼠标经过时，显示该点的相关信息。） $(#container).highcharts(json);//将该json文本放入到HighCharts中。});/script/body/html以上界面代码实现效果，如图所示：后台的HighCharts的折线图实现方法：如果该图表需要一些常量，则在DimensionBeanConf.java中的添加不同的ID值和定义相应的com.tingyun.api.core.chart.bean.DimensionBean类对象。在ChartBeanConf.java中添加以“com.tingyun.api.core.chart.bean.ChartBean”为类型定义一个通用实体例如:在ChartConf.java中添加chartId和用该chartId定义chart对象,将该chart对象添加到allCharts中。在TableBeanConf.java中定义com.tingyun.api.core.chart.bean.TableBean类型的表对象。在Baseons.java中，定义着算法、使用字段、别名或者总访问量等条件。在OrderBeanConf.java中，定义了com.tingyun.api.core.chart.bean.OrderBean类型的排序对象。在WebBaseonConf.java中，定义了MapIntegaer,baseonBean类型的webBaseonMap对象，在其中添加所需的web页面传入的baseonId获取相应的BaseonBean参数值。创建图表以chartId命名的{chartId}ChartService.java、{chartId}ChartTooltip.java和