首页 > 代码库 > 使用AngularJS结合Highchart图表动态获取JSON格式数据
使用AngularJS结合Highchart图表动态获取JSON格式数据
Highchart折线图代码
$(function () { var chartLine = new Highcharts.Chart({ chart: { type: 'line', <em><span style="color:#ff0000;">renderTo: 'container2'</span></em> }, title: { text: '上月已还款金额与本月账单金额对比结果' }, subtitle: { text: '' }, xAxis: { categories: [] }, yAxis: { title: { text: '单位 (元)' } }, tooltip: { enabled: false, formatter: function () { return '<b>' + this.series.name + '</b><br>' + this.x + ': ' + this.y + '°C'; } }, plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: false } }, series: [{ name: '上月还款金额', data: [] }, { name: '本月消费金额', data: [] }] }); function getFormLine() { return $http.get("/billsDetail/twoMonthChartData").success(function (response) { //为图表设置值 <strong><span style="color:#ff0000;">chartLine.series[0].setData(response.data.lastMonth); chartLine.series[1].setData(response.data.thisMonth); chartLine.xAxis[0].setCategories(eval(response.data.categorys));</span></strong> }).error(function (response) { $log.debug("请求超时或网络故障!获得列表失败!") }); } getFormLine(); });
后端拼JSON代码
public JSONObject listLastMonthAndThismonthBillsData() { JSONObject json =new JSONObject(); List<String> categorys =new ArrayList<String>(); List<Double> lastMonthData=http://www.mamicode.com/new ArrayList();>
HTML代码<div id="container2"> </div>效果图
使用AngularJS结合Highchart图表动态获取JSON格式数据
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。