0
Я создаю следующую диаграмму Highcharts:Highcharts XAxis несколько цветов
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);
Мне нужно установить второй цвет XAxis более чем один цвет. Мой второй xAxis динамически обновляется. Как я могу выбрать разные цвета для разных значений линии? Мне нужно динамически обновлять эти значения.
Не могли бы вы опубликовать изображение требуемой диаграммы? Не могли бы вы предоставить рабочую демонстрацию? например в JSFiddle? –
Что вы подразумеваете под «xAxis colors»? На какую часть оси х вы ссылаетесь? – jlbriggs
Я имею в виду, что мой второй xAxis linecolor не должен состоять из одного цвета. Он должен быть, например, наполовину зеленым, наполовину красным. – ksup