Code: Select all
const splineSize = document.getElementsByName('spline') as any;
var splineWidth = document.documentElement.scrollWidth - 300,
splineHeight = 900,
font14 = null;
var SplineSeries = Highcharts.seriesTypes.spline;
this.chart.splineProtoType = SplineSeries.prototype.drawGraph;
// override the drawLine method
var splineDrawGraph = SplineSeries.prototype.drawGraph;
if (document.documentElement.scrollWidth > 1263) {
font14 = 18;
} else if (document.documentElement.scrollWidth <= 1263 && document.documentElement.scrollWidth > 959) {
font14 = 14;
} else if (document.documentElement.scrollWidth <= 959) {
font14 = 11;
}
SplineSeries.prototype.drawGraph = function () {
var arrowLength = 15,
arrowWidth = 8,
series = this,
segments = series.points,
path = [];
if (segments.length > 0) {
let lastPoint = segments[segments.length - 1];
let nextLastPoint = segments[segments.length - 2];
let angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) / (lastPoint.plotY - nextLastPoint.plotY));
if (angle < 0) {
angle = Math.PI + angle;
}
// call the original method
splineDrawGraph.apply(series, arguments);
// last point
path.push('M', lastPoint.plotX, lastPoint.plotY);
if (lastPoint.plotX > nextLastPoint.plotX) {
// to the right
path.push('L', lastPoint.plotX + arrowWidth * Math.cos(angle), lastPoint.plotY - arrowWidth * Math.sin(angle));
path.push(lastPoint.plotX + arrowLength * Math.sin(angle), lastPoint.plotY + arrowLength * Math.cos(angle));
path.push(lastPoint.plotX - arrowWidth * Math.cos(angle), lastPoint.plotY + arrowWidth * Math.sin(angle), 'Z');
} else {
// to the left
path.push('L', lastPoint.plotX - arrowWidth * Math.cos(angle), lastPoint.plotY + arrowWidth * Math.sin(angle));
path.push(lastPoint.plotX - arrowLength * Math.sin(angle), lastPoint.plotY - arrowLength * Math.cos(angle));
path.push(lastPoint.plotX + arrowWidth * Math.cos(angle), lastPoint.plotY - arrowWidth * Math.sin(angle), 'Z');
}
series.chart.renderer
.path(path)
.attr({
fill: series.color,
})
.add(series.group);
}
};
Highcharts.chart('spline', {
chart: {
margin: 75,
type: 'spline',
reflow: false,
animation: {
duration: 4000,
},
height: splineHeight,
events: {
load: function () {
const chart = this,
offset = 75,
topMargin = 50;
chart.renderer
.text('More +', chart.chartWidth - offset, chart.chartHeight + topMargin - offset + 23)
.css({
color: 'orange',
fontWeight: 'bold',
fontSize: font14,
})
.add();
chart.renderer
.text('- Less', offset - 60, chart.chartHeight + topMargin - offset)
.attr({
rotation: -90,
})
.css({
color: 'orange',
fontWeight: 'bold',
fontSize: font14,
})
.add();
chart.renderer
.text('- Less', offset - 50, chart.chartHeight + topMargin - offset + 23)
.css({
color: 'green',
fontWeight: 'bold',
fontSize: font14,
})
.add();
chart.renderer
.text('More +', offset - 60, offset + topMargin)
.attr({
rotation: -90,
})
.css({
color: 'green',
fontWeight: 'bold',
fontSize: font14,
})
.add();
const startX = 0,
startY = 75,
endX = chart.chartWidth,
endY = startY,
yAxisZero = chart.yAxis[0].translate(0);
if (!chart.customLine) {
chart.customLine = chart.renderer
.path(['M', startX, startY - 30, 'L', endX, endY - 30])
.attr({
'stroke-width': 1,
stroke: 'black',
})
.add();
} else {
chart.customLine.attr({
d: ['M', startX, startY, 'L', endX, endY],
});
}
},
},
},
credits: {
enabled: false,
}, // 하단 highchart.com 글씨 삭제
exporting: {
// 상단 context menu 제거
enabled: false,
},
title: {
text: '',
},
legend: {
enabled: true,
symbolPadding: 0,
symbolWidth: 0,
symbolHeight: 0,
squareSymbol: false,
align: 'right',
verticalAlign: 'top',
itemStyle: {
textDecoration: 'underline',
}
},
plotOptions: {
spline: {
events: {
legendItemClick: function (e) {
const chart = this.chart;
const chartClick = e.target.chart,
index = e.target.index,
series = chartClick.series[index];
if (!series.visible) {
const options = series.options;
series.remove();
options.visible = !options.visible;
chartClick.addSeries(options);
return false;
}
chart.series.find((series) => series.name === 'Clear all').setVisible(true);
if (this.name === 'Clear all') {
chart.series.forEach((series) => series.setVisible(false));
}
},
},
states: {
inactive: {
opacity: 1,
},
},
dataLabels: {
enabled: true,
align: 'left',
useHTML: true,
y: 15,
x: -5,
allowOverlap: true,
formatter: function () {
if (this.series.data[this.series.data.length - 1].visible == true) {
if (this.x === this.series.data[this.series.data.length - 1].category) {
return '<p style="color:' + this.series.data[this.series.data.length - 1].color + '; font-size: 18px; font-weight: 900;">' + this.series.name + '</p>';
}
}
return null;
},
},
marker: {
enabled: false,
},
},
scatter: {
dataLabels: {
enabled: true,
y: -5,
formatter: function () {
return this.key;
},
},
},
},
tooltip: {
formatter: function () {
const date = new Date(this.point.z);
return Highcharts.dateFormat('%b %d, %Y', Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
},
},
xAxis: {
type: 'datetime',
gridLineWidth: 0,
min: -3,
max: 3,
lineWidth: 1,
lineColor: '#b3b3b3',
offset: -1 * (splineHeight / 2 - 75),
labels: {
enabled: false,
},
title: {
text: 'Asset correlation',
y: 0.4 * splineHeight + 20,
x: 5,
style: {
fontSize: font14,
fontWeight: 'bold',
},
},
},
yAxis: {
gridLineWidth: 0,
min: -3,
max: 3,
lineWidth: 1,
lineColor: '#b3b3b3',
offset: -1 * (splineWidth / 2 -87),
labels: {
enabled: false,
},
title: {
text: 'Risk sentiment',
x: -1 * (splineWidth / 2 - 50),
y: 0,
style: {
fontSize: font14,
fontWeight: 'bold',
},
},
},
series: this.data.spline.date,
});
SplineSeries.prototype.drawGraph = this.chart.splineProtoType;
},