Javascript 每次单击时间线图表后，如何使用新数据重新绘制时间线？
我有这样的数据：Javascript 每次单击时间线图表后，如何使用新数据重新绘制时间线？,javascript,highcharts,Javascript,Highcharts,我有这样的数据： var data = [{ x: Date.UTC(1951, 5, 22), name: 'First dogs in space', label: 'fds', dataLabels: { allowOverlap: false, format: '<span style="color:{point.color}">● </span><span style="font-weight
var data = [{
x: Date.UTC(1951, 5, 22),
name: 'First dogs in space',
label: 'fds',
dataLabels: {
allowOverlap: false,
format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
'</span><br/>{point.label}'
},
}, {
x: Date.UTC(1957, 9, 4),
name: 'First artificial satellite',
label: 'First artificial satellite',
}, {
x: Date.UTC(1959, 0, 4),
name: 'First artificial satellite to reach the Moon',
label: 'First artificial satellite to reach the Moon',
}, {
x: Date.UTC(1961, 3, 12),
name: 'First human spaceflight',
label: 'First human spaceflight',
}, {
x: Date.UTC(1966, 1, 3),
name: 'First soft landing on the Moon',
label: 'First soft landing on the Moon',
}, {
x: Date.UTC(1969, 6, 20),
name: 'First human on the Moon',
label: 'First human on the Moon',
}, {
x: Date.UTC(1971, 3, 19),
name: 'First space station',
label: 'First space station',
}, {
x: Date.UTC(1971, 11, 2),
name: 'First soft Mars landing',
label: 'First soft Mars landing',
}, {
x: Date.UTC(1976, 3, 17),
name: 'Closest flyby of the Sun',
label: 'Closest flyby of the Sun',
}, {
x: Date.UTC(1978, 11, 4),
name: 'First orbital exploration of Venus',
label: 'First orbital exploration of Venus',
}, {
x: Date.UTC(1986, 1, 19),
name: 'First inhabited space station',
label: 'First inhabited space station',
}, {
x: Date.UTC(1989, 7, 8),
name: 'First astrometric satellite',
label: 'First astrometric satellite',
}, {
x: Date.UTC(1998, 10, 20),
name: 'First multinational space station',
label: 'First multinational space station',
}];
您好@vikash，
setDatasetDatavar unclickable = ["First artificial satellite to reach the Moon", "First soft landing on the Moon"];
var timelinechart = new Highcharts.Chart('timeline_container', {
chart: {
events: {
redraw: function() {
var series = this.series[0];
series.points.forEach(function(p) {
if (p.customDataLabel && p.dataLabel.fill !== 'rgba(64,158,255,.1)') {
// console.log('inisde redraw')
// this.dataLabel.text.element.style.fill= '';
// p.series.chart.redraw();
// p.dataLabel.attr({
// fill: 'rgba(64,158,255,.1)',
// stroke:'rgb(77, 184, 234)',
// });
}
});
},
load: function() {
var chart = this;
chart.series[0].points.forEach(function(point) {
if(!unclickable.includes(point.label)) {
point.dataLabel.on('mouseover', function() {
point.dataLabel.box.css({
fill: 'rgba(64,158,255,.1)',
});
});
point.dataLabel.on('mouseout', function() {
point.dataLabel.box.css({
fill: 'white'
});
});
}
});
}
// load: function () {
// var series = this.series[0];
// }
},
// zoomType: 'x',
type: 'timeline'
},
xAxis: {
type: 'datetime',
// max: 6,
visible: false,
},
scrollbar: {
enabled: data.length < 10 ? false : true
// enabled: true
},
yAxis: {
gridLineWidth: 1,
title: null,
labels: {
enabled: false
}
},
plotOptions: {
series: {
cursor: 'pointer',
},
},
legend: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
// colors: [
// '#CCC5A6',
// '#545454'
// ],
tooltip: {
style: {
width: 300
}
},
series: [{
point: {
events: {
mouseOver: function() {
// var unclickable = ["Abandoned","Appeal","Interview","RCE","Application Filed"];
if(unclickable.includes(this.label)) {
this.dataLabel.element.style.setProperty('cursor', 'default');
// this.dataLabel.element.style.setProperty('')
this.dataLabel.text.element.style.setProperty('cursor', 'default');
// this.dataLabel.text.element.style.setProperty('color', '#000');
// this.dataLabel.options.shadow = true
}
},
click: function(data) {
// var unclickable = ["Abandoned","Appeal","Interview","RCE","Application Filed"];
var points = this.series.points;
vm.first_load = false;
if(!unclickable.includes(this.label)){
// vm.is_timeline_wzaiting = true;
vm.is_timeline_clicked = true;
for (var i = points.length-1; i >= 0; i--) {
if (i !== this.index) {
if (points[i]) {
points[i].dataLabel.attr({
fill: '#fff'
});
points[i].dataLabel.text.element.style.fill= '';
points[i].customDataLabel = false;
points[i].remove(false);
this.series.chart.redraw();
}
}
else{
vm.is_timeline_waiting = false;
i = -1;
}
}
// let sliced_data = points.slice(0,this.index+1);
// console.log(this.series.chart.series[0])
// console.log(this.series)
// if(sliced_data){
// this.series.setData(sliced_data);
// this.series.chart.redraw();
// }
// vm.generateTimeline(sliced_data);
// console.log(points.slice(0,this.index+1));
this.series.chart.redraw();
this.customDataLabel = true;
this.series.chart.highlightedLabelIndex = this.index;
// console.log(this.dataLabel)
this.dataLabel.attr({
fill: 'rgba(64,158,255,.1)',
stroke:'rgb(77, 184, 234)'
});
// console.log(this.customDataLabel)
this.dataLabel.text.element.style.fill= '#4db8ea';
// console.log('here');
// console.log(this.dataLabel.text.element);
vm.GetinfoToCorrespondingTimeline(data.point.index,data.point.label);
// this.dataLabel.text.element.style.fill= '';
}
},
},
},
dataLabels: {
allowOverlap: true,
format: '<span>● </span><span> ' +
'{point.x:%d %b %Y}</span><br/><span style="font-weight: bold;">{point.label}</span>'
},
marker: {
symbol: 'circle'
},
data: data.slice(),
}]
},
function() {
const min = Math.max(this.series[0].points.length - 6, 0);
// console.log(this.series[0].points)
const max = Math.max(this.series[0].points.length - 1, 0);
this.xAxis[0].setExtremes(this.series[0].points[min].x, this.series[0].points[max].x);
this.series[0].points[this.series[0].points.length -1].dataLabel.attr({
fill: 'rgba(64,158,255,.1)',
stroke:'rgb(77, 184, 234)'
});
this.series[0].points[this.series[0].points.length -1].dataLabel.text.element.style.fill= '#4db8ea';
if(this.series[0].points.length -1 && vm.first_load){
this.series[0].points[this.series[0].points.length -1].dataLabel.text.element.style.fill= '#4db8ea';
vm.first_load = false;
}
}
);