highCharts使用中问题总结

想出一张图表，数据是多条线体，45天的数据展示最近15天的。并且每次展示其中一条。可以切换时间看前面的或者后面的。

最开始遇到的问题是，展示一条线体成功，但是在切换线体的时候，成功但是接着刷新到最开始的状态。

跟同事分析后发现是方法引用的问题。也就是每次在给highCharts赋值时要保证都是重新打开一个图表，但是数据切换了。

数据的展示。遇到的问题是从ajax查询后台时，用request.setAttribute('' , '' ) 无效。jsp页面得不到数据。也是可以理解。然后解决的方案是

在传值中加上。使用对象JSONObject 传值。

事件的问题。对每条数据添加点击事件，使用到this.x 值。这是数据出现的下标值。

具体代码如下：

var baseData = '';var  arrayIndex = 0 ,j=0;var  showLength = 15 ;var flags = true ;var getObjArray = new Array() ;$(document).ready(function() {$.ajax({type : 'post',url : url+'/dmsHistoryHchartsData/highChartsOneCheckData',            datatype : 'josn',async : false,data : '',success : function(data) {baseData = JSON.parse(data);var array = baseData['array'] ;if(array.length>0){createHighCharts(0);                }else{//              如果没有值 显示默认图 Highcharts.chart('container', {chart: {type: 'column' },title: {text: '没有要展示的数据，请联系管理员' },xAxis: {categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']                        },yAxis: {min: 0,title: {text: 'Total fruit consumption' },stackLabels: {enabled: true,style: {fontWeight: 'bold',color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' }                            }                        },legend: {align: 'right',x: -30,verticalAlign: 'top',y: 25,floating: true,backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',borderColor: '#CCC',borderWidth: 1,shadow: false },tooltip: {headerFormat: '<b>{point.x}</b><br/>',pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}' },plotOptions: {column: {stacking: 'normal',dataLabels: {enabled: true,color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' }                            }                        },series: [{name: 'John',data: [5, 3, 4, 7, 2]                        }, {name: 'Jane',data: [2, 2, 3, 2, 1]                        }, {name: 'Joe',data: [3, 4, 4, 2, 5]                        }]                    });                }            },error : function() {alert("ajax查询返回失败");            }        });

    });

function createHighCharts(flagA){var array = baseData['array'] ;if('1'==flagA){if(arrayIndex-1>=0){arrayIndex-=1 ;            }else{alert("当前是第一条线体");return ;            }        }else if('2'==flagA){if(arrayIndex+1>array.length){alert("当前是最后一条线体");return ;            }else{arrayIndex = arrayIndex+1;            }        }var map = baseData['Map'] ;lineName= array[arrayIndex];beanList = map[lineName] ;var listLength = beanList.length ;

if(showLength>=listLength){showLength = listLength;flags =false ;        }else{flags=true ;        }j = beanList.length - showLength ;changeColumn(0);    }function changeColumn(flagsTwo){if('1'==flagsTwo){if(!flags){

alert("当前线体没有其他数据展示！");return ;            }else{if(j-5>=0){j-=5;                }else{alert("当前线体没有其他数据展示！");return ;                }            }        }else if('2'==flagsTwo){

if(!flags){alert("当前线体没有其他数据展示！");return ;            }else{if((j +showLength+5)> beanList.length ){alert("当前线体没有其他数据展示！");return ;                }else{j+=5;                }            }        }         --  构造展示的数据  timeArray = new Array();  //  时间数据 var lineCount = new Array(); // 线体产量 var goodsCount = new Array(); // 耗材消耗量 var dollarCount = new Array();  // 耗材消耗金额 getObjArray = new Array();for(var i=0 ;i<showLength;i++ ){var bean = beanList[i+j];timeArray.push(bean.thisdayA); // 时间 lineCount.push(parseFloat(bean.milliA));  //线体产量千分比 goodsCount.push(parseFloat(bean.outWhQtA)); // 耗材消耗量 dollarCount.push(2);// 模拟数据 }objArray = new Array() ;var obj = new Object();  //  展示主数据 obj.name='费用';obj.data = dollarCount ;objArray.push(obj);obj = new Object();obj.name='耗材消耗';obj.data = goodsCount ;objArray.push(obj);obj = new Object();obj.name='线体产量';obj.data = lineCount ;objArray.push(obj);basic();    }

function basic() {var charts = Highcharts.chart('container', {chart: {type: 'column' },title: {text: '产线' + lineName + '当日产量、耗材消耗量、费用展示' },xAxis: {categories: timeArray },yAxis: {min: 0,title: {text: 'Total fruit consumption' },stackLabels: {enabled: true,style: {fontWeight: 'bold',color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' }                }            },legend: {align: 'right',x: -30,verticalAlign: 'top',y: 25,floating: true,backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',borderColor: '#CCC',borderWidth: 1,shadow: false },tooltip: {shared: true,crosshairs: true,//十字线 valueSuffix: ''//标示框后缀加上%

 },plotOptions: {column: {stacking: 'normal',dataLabels: {enabled: true,color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' }                },series: {  --  添加点击事件cursor: 'pointer',point: {events: {click: function () {alert('耗材明细' +( beanList[parseInt(this.x)+j].msgA));                            }                        }                    }                }

            },series: objArray });    }

转载于:https://www.cnblogs.com/a6948076/p/10381574.html

highCharts使用中问题总结相关推荐

highcharts词云部分字体过小
在highcharts使用中,会发现有的字非常小.如图原因是你的数据问题. 如图.series里的data.里面对象的weight属性值相差太大. 建议加一个数,缩小数据之前的倍数差
网页图表Highcharts实践教程之图表代码构成
网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程 ...
网页图表Highcharts实践教程之图表代码构成
网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...
Highcharts使用=====通过指定日期显示曲线
1.说明: 利用HighStock显示曲线,在右上角的日期间隔选择好日期后,重新请求后台数据,重新加载曲线. 2.实现方法: 在HighStock的rangeSelector中有一个属性inputDa ...
数据呈现图表插件Highcharts介绍+图表联动案例
由于项目需要,学习并使用了Highcharts图表插件,这是一款功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库插件. Highcharts简介下边的介绍来自Highcharts中文 ...
html使用highcharts绘制饼图,html js highcharts绘制圆饼图表
jquery实现饼状图效果 - 站长素材 var chart; $(function () { var totalMoney=999 var zccw=178 var sycw=821 $(docum ...
Ajax+SpringBoot+Thymeleaf使用中遇到的跳转页面问题
前言:这周在使用 Ajax+Thymeleaf 时遇到一个问题,折腾了我很久,在此记录一下 Ajax+SpringBoot+Thymeleaf使用中遇到的跳转页面问题问题描述我的目的:通过 Aja ...
statpot:使用mongo+bootstrap+highcharts做统计报表
最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求就需要分析这些数据,然后做出个统计报表. 需求实现最初的时候想着每天把这些接口访问 ...
VMware出现“该虚拟机似乎正在使用中请获取所有权”
1.找到VMware所在的项目文件,其中有一个名为:Ubuntu 64 位.vmx.lck 2.将其Ubuntu 64 位.vmx.lck改名为Ubuntu 64 位.vmx.lck.back(为了安 ...

highCharts使用中问题总结

highCharts使用中问题总结相关推荐

最新文章

热门文章