jsfiddle链接在这里http://jsfiddle.net/MzQE8/110/
我觉得问题出在我的JavaScript中。
我从数组中输入HighChart中的系列对象的值。在数组上我试图找到索引和最大元素的值然后我通过这个修改保存最大数组元素
yArr[index] = {
y: value,
color: '#aaff99'
};
因此它看起来与图中其余点的动态颜色不同。那是它的滑动。
这是我的代码
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
//As this graph is generated due to random values. I am creating an Array with random values.
var yArr = [];
yArr[0] = Math.random();
yArr[1] = Math.random();
yArr[2] = Math.random();
yArr[3] = Math.random();
setInterval(function () {
console.log(yArr.length);
var x = (new Date()).getTime(), // current time
y = Math.random();
var index = findIndexOfGreatest(yArr);
var value = yArr[index];
yArr[index] = {
y: value,
color: '#aaff99'
};
series.addPoint([x, yArr.shift()], true, true);
yArr.push(Math.random());
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 450
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
plotOptions: {
series: {
lineWidth: 1
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random Data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: yArr.shift()
});
}
return data;
})(),
color: 'red'
}]
});
});
function findIndexOfGreatest(array) {
var greatest;
var indexOfGreatest;
for (var i = 0; i < array.length; i++) {
if (!greatest || array[i] > greatest) {
greatest = array[i];
indexOfGreatest = i;
}
}
return indexOfGreatest;
}
}）;
我觉得我的想法是正确的，但我的实施中存在很大漏洞。我想。
由于
答案 0 :(得分：3)
请参阅演示：http://jsfiddle.net/MzQE8/350/
所有y值都存储在series.yData中，因此您无需为此创建另一个数组。现在只更新最高点，并添加新点。像上面的演示，代码：
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0],
index = series.yData.indexOf(series.yData.max());
// mark first max points
this.series[0].prevMax = this.series[0].data[index];
this.series[0].prevMax.update({
color: '#aaff99'
});
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random(),
color = null,
index, max;
if (series.prevMax && series.prevMax.update) {
// remove previously colored point
if (y > series.prevMax.y) {
series.prevMax.update({
color: null
}, false);
color = '#aaff99';
// store max, which is last point
series.prevMax = series.data[series.yData.length];
}
} else {
max = series.yData.max();
index = series.yData.indexOf(max);
if(y > max) {
color = '#aaff99';
series.prevMax = series.data[series.yData.length];
} else {
series.prevMax = series.data[index];
series.prevMax.update({
color: '#aaff99'
}, false)
}
}
// add new point
series.addPoint({
x: x,
y: y,
color: color
}, true, true);
}, 1000);
}
}
答案 1 :(得分：1)
我不确定你的追求，但如果我理解正确，你希望子弹标记是一种不同的颜色，以区别于其他人。我不会包含源代码，因为你在js小提琴中包含的东西是非常先进的东西，你将能够解决这个问题。
计算（所有总值加在一起/ 256 + i）* 255（或类似的东西）
i代表循环中的子弹增量。请给我算法我没有在32小时内睡觉，我知道它的def。建议你查一下。
哦..凯这里是更新的解决方案 http://i966.photobucket.com/albums/ae147/Richard_Grant/Untitled-1_zps7766a939.png
我为此付出了很多努力！所以，请！！！好好利用它 - .-＆＃39;
这里发生的事情是我绘制了一个值为0 - 200的图形，并且我将图形结果标记为1 - 4，我也将这个x坐标变为非常懒。
在工作流程中，RES =表示结果或X，Val =值或Y
这些用于计算RGB值，我解决了前3个结果。第一个结果切线应始终为0，因为任何可被0整除的数字都是0，任何数字乘以0都是0.
当我说切线时，我的意思是点的角度为200,0值（不可见点）。在这个公式中，角度不会完善，因为图表上的x和y不相等，一个是最大值200，另一个是最大值4。如果我希望这是准确的，我会将切线变为百分比并乘以255.但我没有。
我觉得我已经为你提供了必要的工具来自己完成你的请求:)如果你不明白我是怎么做的或者找到了这个算法，那就回到随机颜色。
答案 2 :(得分：0)
感谢John doe，你的问题对我很有帮助。这是我用来改变y轴最大值颜色的函数：
<div class="x">
<div class="y">
some text
</div>
</div>它也可以帮助其他人。