怎样生成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>
上述代码的效果图
所有回答(2)
0
Categories有个Y属性值你设置下，可以将显示内容往上(+值)或往下(-值)移动
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;}
