0
나는 다음과 같은 Highcharts 차트를 만드는 오전은 :Highcharts x 축 여러 색상
var chart = {
type: 'scatter',
zoomType: 'xy',
backgroundColor: 171515,
events: {
selection:function(event){
var myChart = $('#chartContainer').highcharts();
if(event.xAxis || event.yAxis){
xAxisBool = true;
$('#chartContainer').highcharts().xAxis[1].update({
visible: false
});
}
else{
xAxisBool = false;
$('#chartContainer').highcharts().xAxis[1].update({
visible: true
});
}
}
}
};
var title = {
text: '<span style="color: #a85757">discovery</span>'
};
var subtitle = {
text: '<span style="color: #a85757">Source: VR-Forces</span>'
};
var xAxis = [{
title: {
enabled: true,
text: '<span style="color: #a85757">Heading (Deg)</span>'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
tickPositions: [-180,-160,-140,-120,-100,-80,-60,-40,-20,0,20,40,60,80,100,120,140,160,180],
lineColor: '#a85757',
tickColor: '#FF0000',
tickWidth: 3,
labels: {
style: {
color: 'white'
}
}
},{
title: {
enabled: false
},
valueDecimals: 1,
startOnTick: true,
endOnTick: true,
ceiling: 360,
/*lineColor: '#a85757',*/
tickColor: '#FF0000',
tickWidth: 3,
labels: {
style: {
color: 'white'
}
},
colors: {
minColor: '#0b933f',
maxColor: '#cc1c0f'
}
}];
var yAxis = {
title: {
enabled: true,
text: '<span style="color: #a85757">Frequency [GHz]</span>'
},
allowDecimals: true,
valueDecimals: 4,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
ceiling: 20.0000,
min: 0.0000,
max: 20.0000,
tickAmount: 15,
labels: {
style: {
color: 'white'
}
}
};
var borderColor = '#696969';
var legend = {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 800,
y: -8,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#a6a6a6',
borderWidth: 1
};
var plotOptions = {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.id}, {point.x} Deg, {point.y} GHz',
valueDecimals: 3
},
showInLegend: true
},
series: {
cursor: 'pointer',
events: {
click: function (e) {
var id = e.point.id;
chartSelect(id);
}
}
}
};
var credits = {
enabled: false
};
var series = [{
name: 'firstSeries',
color: '#ffffff',
data: [],
valueDecimals: 4,
marker: {
symbol: 'url(./icons/GreenSquare.png)'
}
},{
name: 'secondSeries',
color: '#ffffff',
data: [],
valueDecimals: 4,
marker: {
symbol: 'url(./icons/BlueSquare.png)'
}
}, {
name: 'thirdSeries',
color: '#ffffff',
data: [],
valueDecimals: 4,
marker: {
symbol: 'url(./icons/PurpleSquare.png)'
}
}];
var chartJson = {};
chartJson.chart = chart;
chartJson.title = title;
chartJson.subtitle = subtitle;
chartJson.xAxis = xAxis;
chartJson.yAxis = yAxis;
chartJson.borderColor = borderColor;
chartJson.legend = legend;
chartJson.plotOptions = plotOptions;
chartJson.credits = credits;
chartJson.series = series;
$('#chartContainer').highcharts(chartJson);
나는 두 개 이상의 색상에 두 번째 x 축 색상을 설정해야합니다. 두 번째 xAxis가 동적으로 업데이트됩니다. 라인의 다른 값에 따라 다른 색상을 결정하려면 어떻게해야합니까? 이러한 값을 동적으로 업데이트해야합니다.
당신은 필요한 차트의 이미지를 게시 할 수 있을까요? 데모를 제공 할 수 있습니까? 예 : JSFiddle에서? –
"xAxis colors"란 무엇을 의미합니까? x 축의 어떤 부분을 언급하고 있습니까? – jlbriggs
두 번째 xAxis 라인 컬러가 한 가지 색상으로 이루어져서는 안된다는 뜻입니다. 그것은 예를 들어 반쯤 녹색 인 절반 빨간색이어야합니다. – ksup