我正在制作高图表以使动态变化，这是图形：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>RNA</title>
<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/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="regression.js"></script>
<script>
$(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]
];
$('#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
},
xAxis: {
categories: ['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'],
labels:{rotation: 40, x:-20}
},
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,
extprop: 'power issue'
}, {
x: 3,
y: 99.40,
extprop: 'flood'
}, {
x: 4,
y: 99.21,
extprop: 'power issue'
}, {
x: 5,
y: 98.45,
extprop: 'flood'
}, {
x: 6,
y: 98.41,
extprop: 'power issue'
}, {
x: 7,
y: 99.18,
extprop: 'flood'
}, {
x: 8,
y: 99.36,
extprop: 'power issue'
}, {
x: 9,
y: 99.31,
extprop: 'flood'
}, {
x: 10,
y: 99.38,
extprop: 'power issue'
}, {
x: 11,
y: 99.20,
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>
<body>
<div id="container" style="height: 400px"></div>
</body>
</html>
这是链接，我正在为此做项目，实际上我有两个问题。
1.如何将点颜色更改为趋势线下方的红色。
2.如何使点和日期直线对齐，即...点位于日期之间。
3.当页面加载到Internet Explorer 10或8中时，图形未显示动画效果，就像图形绘制带有动画效果的图形正在chrome中加载，而mozilla ie10，ie8现在正在显示动画效果。 ？
这是屏幕截图：
在上图中，带圆圈的突出显示变为红色点，
第二条是指向日期的线，必须与日期对齐。
请帮忙。
谢谢
最佳答案
抱歉，您的答复很晚，您的两个问题都做了一些较小的修改即可解决，对于所有红点，您需要指定它们的color: 'red'：
{
x: 11,
y: 99.20,
color: 'red',
extprop: 'flood'
}
另一个问题是由于指定了xAxis Categories。所以我将它们放在外面，并使用格式化程序填充xAxis标签，还使用了
tickInterval: 1xAxis: {
labels:{
rotation: 90,
align: "left",
formatter: function () {
return dates[this.value];
},
},
tickInterval: 1
},
See the working DEMO here