首页 新闻 会员 周边 捐助

怎样生成HighCharts图表,其纵坐标是科学计数法形式

0
悬赏园豆:10 [待解决问题]

各位高手们,你们好

在最近的一个项目里面,用到HighCharts实现图表,要求Y轴坐标值以科学计数法形式展现,X轴以“季度Q/年份”形式展现。
目前,使用对数值形式勉强可以实现Y轴坐标值的要求,但存在错误。程序里面传递的是对数,对于“-1E-5”和“1E-5”,不能区分,而“1E-5”本应在“0”上面,显示时却是在“0”的下方。另外,X轴值以Categories属性进行设置的,在数据过多的时候,设置了Rotation为-90,目前该Categories值在显示时,与图表有所重叠。

由于我是第一次使用HighCharts,实现时也是根据效果,一个个去查属性试验出来的。这两个问题耗费了好长时间,都没有解决,目前时间很紧急,烦请各位高手帮忙。

以下是代码

生成HighCharts图表
<form id="form1" runat="server">
<div>
<fieldset class="fieldset_style" style="width: 640px;">
<div id="container" style="width: 95%; height: 400px; margin: 0 auto">
</div>
</fieldset>
</div>

<script src="JS/jquery-1.6.2.min.js" type="text/javascript"></script>

<script src="JS/HighCharts/highcharts.src.js" type="text/javascript"></script>

<script type="text/javascript">

var chart;

$(document).ready(function() {

chart
= new Highcharts.Chart({
chart: {
renderTo:
'container', //图表容器Id
defaultSeriesType: 'spline', //图表类型 line, spline, area, areaspline, column, bar, pie , column,scatter
inverted: false, //左右显示,默认上下正向。假如设置为true,则横纵坐标调换位置
plotBackgroundColor: null,
plotBorderWidth:
null,
zoomType:
'y',
spacingRight:
2, //图表距右侧的位置
spacingLeft: 2, //图表距右侧的位置
plotShadow: false
},

title: {
text:
"测试图表标题" //图表标题
},

//Y轴坐标标题 labels:纵柱标尺
yAxis: {
min:
-10,
max:
10,
title: {
enabled:
false,
text:
''
},

labels: {
formatter: function() {
if (this.value == "" || this.value == null) {
return '0';
}
if (parseInt(this.value) == 0) {
return '1';
}
if (parseInt(this.value) > 0) {
return '1E+' + this.value;
}
if (parseInt(this.value) < 0) {
return '1E' + this.value;
}
}
}
},

xAxis: {
allowDecimals:
false, //间隔不出现小数
gridLineWidth: 1,
categories: [
'1Q/2008','2Q/2008','3Q/2008','4Q/2008','1Q/2009','2Q/2009','3Q/2009','4Q/2009','1Q/2010','2Q/2010','2Q/2011','3Q/2011'],

labels: {
rotation:
-90, //坐标值显示的倾斜度
formatter: function() {
return this.value;
}
}
},

//当鼠标悬置数据点时的格式化提示
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b>:<br/>' + this.point.xTtile + '; ' + this.point.name;
}
},
series: [{
type:
"line", //图表类型
name: "测试图表名称", //图表名称
data: [{name:'2.71E-06',xTtile:'1Q/2008',y:-5.56},{name:'2.71E-10',xTtile:'2Q/2008',y:-10},{name:'1E-03',xTtile:'3Q/2008',y:-3},{name:'2.78E-06',xTtile:'3Q/2009',y:-5.55615484484342},{name:'5.07E-10',xTtile:'4Q/2009',y:-9.29462379898524},{name:'4.72E-09',xTtile:'1Q/2010',y:-8.32581892918103},{name:'-6.95E-08',xTtile:'2Q/2010',y:-7.15820447353134},{name:'3.22E-06',xTtile:'2Q/2011',y:-5.49256070748956},{name:'-2.61E-07',xTtile:'3Q/2011',y:-6.5829935748812}]
}]

});
});

</script>

</form>

 

上述代码的效果图

薄荷的主页 薄荷 | 初学一级 | 园豆:190
提问于:2011-09-06 21:16
< >
分享
所有回答(2)
0

Categories有个Y属性值你设置下,可以将显示内容往上(+值)或往下(-值)移动

Tom-X | 园豆:515 (小虾三级) | 2012-10-19 11:54
0

设置dataLabels的formatter函数 formatter: function () {var p = Math.floor(Math.log(this.y) / Math.LN10);
var n = this.y * Math.pow(10, -p);return n + 'e' + p;}

evenBoy | 园豆:202 (菜鸟二级) | 2015-10-16 17:13
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册