首页 > 代码库 > Highcharts中初始化最大值与最小值的柱状图
Highcharts中初始化最大值与最小值的柱状图
var resultObj = "{name:‘当月总量数‘,data:[null,null,null,null,null]}@{name:‘累计总量数‘,data:[19263.9,27077.7,5663.6,13207.5,20361.7]}"; var resultText = resultObj.toString(); var resultStr = resultText.split("@"); var min = null,max = null,mark = true,data = http://www.mamicode.com/null; for(var i=0;i<resultStr.length;i++){ var jSVO = eval("("+resultStr[i] +")"); resultStr[i] = jSVO; data = resultStr[i].data; for(var j = 0, len = data.length;j < len;j ++){ if(data[j] == null){ continue; } if(mark){ mark = false; min = data[j],max = data[j]; } if(min > data[j]){ min = data[j]; } if(max < data[j]){ max = data[j]; } } } console.log(min + "======" + max); //X轴 var xAxisObj = "2013年09月@12月@2014年03月@06月@09月" var xAxisText = xAxisObj.toString(); var xAxisStr = xAxisText.split("@"); $(function () { //画图 $(‘#container‘).highcharts({ chart: { type: ‘column‘ }, title: { text: "" }, colors:[‘#8300b6‘,‘#73abe4‘], subtitle: { text: "" }, xAxis: { tickmarkPlacement:‘on‘, labels:{ rotation:-15, style:{ fontSize:‘18px‘ } }, categories: xAxisStr }, yAxis: { min: min, max: max, title: { text: "" }, labels : { enabled: true } }, credits:{//右下角的文本 enabled: false }, exporting:{ enabled:false //用来设置是否显示‘打印’,‘导出‘等功能按钮，不设置时默认为显示 }, tooltip: { enabled: true, headerFormat: ‘<span style="font-size:16px">{point.key}</span><table>‘, pointFormat: ‘<tr><td style="color:{series.color};padding:0">{series.name}: </td>‘ + ‘<td style="padding:0"><b>{point.y}</b></td></tr>‘, footerFormat: ‘</table>‘, shared: true, useHTML: true, style:{ fontSize:‘16px‘ } }, plotOptions: { column: { dataLabels: { enabled: true }, pointWidth: 10, pointPadding : 0.1 } }, plotOptions: { column: { dataLabels: { enabled: true, formatter: function() { return this.y; } } } }, series: resultStr }); });
<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script> <script> //上面的Javascript代码 </script> </head> <body> <div id="container" style="min-width:700px;height:400px"></div> </body> </html>
Highcharts中初始化最大值与最小值的柱状图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。