我正在尝试创建一个在图表中显示某些数据的网页。为此,我使用的是JavaScript库Highcharts。
它工作得很好,但我想改变图表的突出显示行为,我不能坚持这样说。我在这里找到了一个代码片段:
我可以让它工作,但是当我用新数据重绘图表时,这种行为就消失了。 一些示例代码:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'One',
data: [[1,2.3],[2,6.7],[3,10],[4,2.5]]
}, {
name: 'Two',
data: [[1,20],[2,10],[3,11],[4,12]]
}, {
name: 'Three',
data: [[1,21],[2,23],[3,10],[4,4]]
}, {
name: 'Four',
data: [[1,12],[2,2],[3,4],[4,6]]
}]
},
function(chart){
$(chart.series).each(function(i, serie){
$(serie.legendItem.element).hover(function(){
highlight(chart.series, serie.index, true);
}, function(){
highlight(chart.series, serie.index, false);
});
});
function highlight(series, index, hide) {
$(series).each(function (i, serie) {
if(i != index) {
$.each(serie.data, function (k, data) {
if(data.series) {
data.series.graph && data.series.graph.attr("stroke", (hide ? "#D4D4D4": serie.color));
data.series.markerGroup && data.series.markerGroup.attr("visibility", (hide ? "hidden": "visible"));
}
});
} else {
serie.group.toFront();
$.each(serie.data, function (k, data) {
if(data.series) {
data.series.graph && data.series.graph.attr("stroke", serie.color);
}
});
}
});
}
});
});
var new_series = [{
name: 'One_2',
data: [[1,3.3],[2,4.7],[3,20],[4,6]]
}, {
name: 'Two_2',
data: [[1,20],[2,0],[3,10],[4,5]]
}, {
name: 'Three_2',
data: [[1,21],[2,5],[3,10],[4,12]]
}, {
name: 'Four_2',
data: [[1,12],[2,15],[3,20],[4,12]]
}]
$('#redraw').click(function() {
while(chart.series.length > 0)
chart.series[0].remove(true);
for (var i = 0; i < new_series.length; i++){
chart.addSeries(new_series[i],false);
}
chart.redraw();
});
});
这是一个显示我的问题的小提琴:http://jsfiddle.net/qpByN/34/
单击重绘时,突出显示行为恢复正常。我该如何坚持下去?
我是一个javascript新手,所以我知道有很多关于工作的东西,但是使用它是最好的学习方法。这个特殊的问题虽然我无法解决,但很可能是因为我不知道要搜索的术语,所以我在这里问如何做。
答案 0 :(得分:0)
这是因为没有为图例中的新项目添加高亮显示。在插件中,每次重绘图例时都会工作,但在你的情况下只有一次 - 当图表被加载时。升级代码:http://jsfiddle.net/qpByN/35/
一个注意事项:当你删除系列,分离事件时,不要做死引用。
代码:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'One',
data: [
[1, 2.3],
[2, 6.7],
[3, 10],
[4, 2.5]
]
}, {
name: 'Two',
data: [
[1, 20],
[2, 10],
[3, 11],
[4, 12]
]
}, {
name: 'Three',
data: [
[1, 21],
[2, 23],
[3, 10],
[4, 4]
]
}, {
name: 'Four',
data: [
[1, 12],
[2, 2],
[3, 4],
[4, 6]
]
}]
}, addEvents);
});
var new_series = [{
name: 'One_2',
data: [
[1, 3.3],
[2, 4.7],
[3, 20],
[4, 6]
]
}, {
name: 'Two_2',
data: [
[1, 20],
[2, 0],
[3, 10],
[4, 5]
]
}, {
name: 'Three_2',
data: [
[1, 21],
[2, 5],
[3, 10],
[4, 12]
]
}, {
name: 'Four_2',
data: [
[1, 12],
[2, 15],
[3, 20],
[4, 12]
]
}]
$('#redraw').click(function () {
while (chart.series.length > 0)
chart.series[0].remove(true);
for (var i = 0; i < new_series.length; i++) {
chart.addSeries(new_series[i], false);
}
chart.redraw();
addEvents(chart);
});
function addEvents(chart) {
$(chart.series).each(function (i, serie) {
$(serie.legendItem.element).hover(function () {
highlight(chart.series, serie.index, true);
}, function () {
highlight(chart.series, serie.index, false);
});
});
}
function highlight(series, index, hide) {
$(series).each(function (i, serie) {
if (i != index) {
$.each(serie.data, function (k, data) {
if (data.series) {
data.series.graph && data.series.graph.attr("stroke", (hide ? "#D4D4D4" : serie.color));
data.series.markerGroup && data.series.markerGroup.attr("visibility", (hide ? "hidden" : "visible"));
}
});
} else {
serie.group.toFront();
$.each(serie.data, function (k, data) {
if (data.series) {
data.series.graph && data.series.graph.attr("stroke", serie.color);
}
});
}
}