我有趋势线和点的基线高图..现在我想在单线系列highstock中添加xaxis的范围......
This is Jsfiddle please observe :
http://jsfiddle.net/hj22wbe5/7/
这是Highstock:
http://www.highcharts.com/stock/demo
或
如何为第一个jsfiddle图形添加导航器,该图形具有highstock ..
请帮助
谢谢!
编辑代码:
<!DOCTYPE html>
<html lang="en">
<title>RNA</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv='X-UA-Compatible' content='IE=Edge'/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<body>
<div id="container" style="height: 400px"></div>
</body>
<script type="text/javscript">
$(function () {
var sourceData = [
[0, 99.43],
[1, 99.40],
[2, 99.24],
[3, 99.40],
[4, 99.21],
[5, 99.45],
[6, 99.41],
[7, 99.18],
[8, 99.36],
[9, 99.31],
[10, 99.38],
[11, 99.20],
[12, 99.38],
[13, 99.32]
];
var dates = ['18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '19-Jul-14', '20-Jul-14', '20-Jul-14'];
$('#container').highcharts({
title: {
text: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
x: -20 //center
},
tooltip: {
formatter: function () {
if (this.series.name == 'Series 2') {
return false;
}
//console.log(this.point.extprop);
var s = 'The value for <b>' + this.x +
'</b> is <b>' + this.y + '</b>';
if (this.point.extprop) {
s += 'for <b>' + this.point.extprop + '</b>';
}
return s;
}
},
subtitle: {
text: '',
x: -20
},
navigator: {
enabled: true
},
xAxis: {
labels: {
rotation: 90,
align: "left",
formatter: function () {
return dates[this.value];
},
},
tickInterval: 1
},
yAxis: {
title: {
text: 'Percent'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
//align: 'right',
//verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA',
data: [{
x: 0,
y: 99.43,
extprop: 'power issue'
}, {
x: 1,
y: 99.40,
extprop: 'flood'
}, {
x: 2,
y: 99.24,
color: 'red',
extprop: 'power issue'
}, {
x: 3,
y: 99.40,
extprop: 'flood'
}, {
x: 4,
y: 99.21,
color: 'red',
extprop: 'power issue'
}, {
x: 5,
y: 98.45,
color: 'red',
extprop: 'flood'
}, {
x: 6,
y: 98.41,
color: 'red',
extprop: 'power issue'
}, {
x: 7,
y: 99.18,
color: 'red',
extprop: 'flood'
}, {
x: 8,
y: 99.36,
extprop: 'power issue'
}, {
x: 9,
y: 99.31,
color: 'red',
extprop: 'flood'
}, {
x: 10,
y: 99.38,
extprop: 'power issue'
}, {
x: 11,
y: 99.20,
color: 'red',
extprop: 'flood'
}, {
x: 12,
y: 99.38,
extprop: 'power issue'
}, {
x: 13,
y: 99.32,
extprop: 'flood'
}]
}, {
type: 'line',
marker: {
enabled: false
},
/* function returns data for trend-line */
data: (function () {
return fitData(sourceData).data;
})()
}],
credits: {
enabled: false
}
});
});
</script>
</html>
是的,这是脚本和一个问题,当我在浏览器中加载图表没有显示,当我检查元素没有错误那里..我无法找到问题..在浏览器中显示空白页面.. @ pawel。 感谢