Code: Select all
let chartMargin = 0,
font14 = null,
legendWidth = null;
if (document.documentElement.scrollWidth > 1263) {
chartMargin = 300;
font14 = 14;
} else if (document.documentElement.scrollWidth <= 1263 && document.documentElement.scrollWidth > 959) {
chartMargin = 150;
font14 = 13;
} else if (document.documentElement.scrollWidth <= 959) {
chartMargin = 50;
font14 = 12;
}
//첫번째
Highcharts.chart('boxPlotFirst', {
chart: {
type: 'column',
height: 300,
events: {
render() {
const chart = this,
legend = chart.legend,
legendMargin = legend.options.margin ? legend.options.margin - legend.padding : 0,
startX = 0,
startY = legend.group.translateY + legend.legendHeight + legendMargin / 2,
endX = chart.chartWidth,
endY = startY;
if (!chart.customLine) {
chart.customLine = chart.renderer
.path(['M', startX, startY, 'L', endX, endY])
.attr({
'stroke-width': 2,
stroke: 'black',
})
.add();
} else {
chart.customLine.attr({
d: ['M', startX, startY, 'L', endX, endY],
});
}
},
load: function() {
var chart = this,
legend = chart.legend,
legendMaxWidth =
Highcharts.relativeLength(legend.options.maxWidth, 1) * chart.chartWidth;
/*if (legend.legendWidth > legendMaxWidth) {
legend.update({
width: legend.options.maxWidth
});
}*/
}
},
},
credits: {
enabled: false,
},
exporting: {
enabled: false,
},
title: {
text: '',
},
xAxis: [
{
width: '30%',
offset: 0,
lineColor: '#000000',
tickColor: '#000000',
categories: ['VIX'],
labels: {
autoRotation: false,
overflow: 'allow',
style: {
fontSize: font14,
color: '#000',
},
},
},
{
width: '30%',
left: '70%',
offset: 0,
lineColor: '#000000',
tickColor: '#000000',
categories: ['MOVE'],
labels: {
autoRotation: false,
overflow: 'allow',
style: {
fontSize: font14,
color: '#000',
},
},
},
],
yAxis: [
{
width: '30%',
offset: 0,
gridLineColor: '#b3b3b3',
min: 0,
labels: {
style: {
fontSize: font14,
color: '#b3b3b3',
},
},
title: {
text: 'VIX Index',
style: {
fontSize: font14,
fontWeight: 'bold',
color: '#000',
},
},
},
{
width: '30%',
left: '70%',
offset: 0,
gridLineColor: '#b3b3b3',
min: 10,
labels: {
style: {
fontSize: font14,
color: '#b3b3b3',
},
format: '{value}%',
},
title: {
text: 'MOVE Index',
style: {
fontSize: font14,
fontWeight: 'bold',
color: '#000',
},
},
},
],
legend: {
align: 'right',
verticalAlign: 'top',
enabled: true,
margin: 40,
height: 30,
minWidth: '80%',
itemStyle: {
fontSize: font14,
fontWeight: 'normal',
fontFamily: 'BLKFort-Book, Arial, Sans-Serif',
color: '#000000',
textOverflow: "ellipsis",
width: '30%',
},
symbolHeight: 11,
symbolWidth: 11,
symbolRadius: 0,
},
tooltip: {
useHTML: true,
shared: false,
valueDecimals: 2,
},
plotOptions: {
column: {
stacking: 'normal',
grouping: false,
},
},
series: [
{
xAxis: 1,
yAxis: 1,
linkedTo: 'test',
type: 'line',
name: '5th to 95th Percentile',
color: '#000000',
data: [
[0, this.data.boxPlot.boxPlot5.moveIndex],
[0, this.data.boxPlot.boxPlot95.moveIndex],
],
marker: {
enabled: false,
},
states: {
hover: {
lineWidth: 0,
},
},
enableMouseTracking: false,
},
{
xAxis: 1,
yAxis: 1,
linkedTo: 'range',
name: 'Interquartile range',
data: [this.data.boxPlot.boxPlotRange.moveIndex],
color: '#ffd600',
borderColor: '#000000',
zIndex: 77,
pointWidth: 40,
},
{
xAxis: 1,
yAxis: 1,
name: 'Q1',
showInLegend: false,
data: [this.data.boxPlot.boxPlot25.moveIndex],
color: 'rgba(100,100,100,0)',
},
{
xAxis: 1,
yAxis: 1,
linkedTo: 'Median',
name: 'Median',
type: 'spline',
color: 'rgb(0,139,92)',
lineWidth: 2,
marker: {
lineColor: 'rgb(0,139,92)',
lineWidth: 2,
radius: 9,
symbol: 'dash',
},
zIndex: 88,
data: [this.data.boxPlot.boxPlot50.moveIndex],
},
{
xAxis: 1,
yAxis: 1,
linkedTo: 'latest',
name: 'Latest',
type: 'spline',
marker: {
radius: 6,
symbol: 'circle',
},
color: '#ff754b',
zIndex: 99,
data: [this.data.boxPlot.boxPlotLatest.moveIndex],
},
{
xAxis: 0,
yAxis: 0,
id: 'test',
type: 'line',
name: '5th to 95th Percentile',
color: '#000000',
data: [
[0, this.data.boxPlot.boxPlot5.vixIndex],
[0, this.data.boxPlot.boxPlot95.vixIndex],
],
marker: {
enabled: false,
},
states: {
hover: {
lineWidth: 0,
},
},
enableMouseTracking: false,
},
{
xAxis: 0,
yAxis: 0,
id: 'range',
name: 'Interquartile range',
data: [this.data.boxPlot.boxPlotRange.vixIndex],
borderColor: '#000000',
color: '#ffd600',
zIndex: 77,
pointWidth: 40,
},
{
xAxis: 0,
yAxis: 0,
name: 'Q1',
showInLegend: false,
data: [this.data.boxPlot.boxPlot25.vixIndex],
color: 'rgba(100,100,100,0)',
},
{
xAxis: 0,
yAxis: 0,
id: 'Median',
name: 'Median',
type: 'spline',
color: 'rgb(0,139,92)',
lineWidth: 2,
marker: {
lineColor: 'rgb(0,139,92)',
lineWidth: 2,
radius: 9,
symbol: 'dash',
},
zIndex: 88,
data: [this.data.boxPlot.boxPlot50.vixIndex],
},
{
xAxis: 0,
yAxis: 0,
id: 'latest',
name: 'Latest',
type: 'spline',
marker: {
radius: 6,
symbol: 'circle',
},
color: '#ff754b',
zIndex: 99,
data: [this.data.boxPlot.boxPlotLatest.vixIndex],
},
],
});