Highcharts выделить одну точку на линии
Я использую Highcharts для рисования линейного графика. Когда страница загружается, строчный график рисуется. Обратите внимание, что я получил значение y для каждого значения x, начиная с 0 до 700 ( 0,1,2,3,...,700). Вот как я создаю график:
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false,
type: 'line',
marginTop: null,
marginRight: 55,
marginBottom: 50,
marginLeft: 80,
backgroundColor: backgroundColor,
spacingTop: 10,
spacingRight: 10,
spacingBottom: 15,
spacingLeft: 10,
},
title: {
text: ' Graph',
style: {color: graphLabelColor},
x: -20 //center
},
xAxis: {
title: {
text: 'xAXIS',
style: {
color: axisLabelColor
},
},
min:0,
max: 600,
gridLineColor: gridLineColor,
minorTickInterval: 50,
minorTickLength: 1,
tickInterval: 100,
minorGridLineWidth: 0,
gridLineWidth: 1,
lineColor: axisColor,
labels: {
style : {
color: axisColor
}
},
plotLines: [{
value: 0,
width: 0,
color: axisColor
}]
},
yAxis: {
title: {
text: 'yAxis',
style: {color:
axisLabelColor
},
},
min:0,
max: 700,
gridLineColor: gridLineColor,
lineColor: axisColor,
minorTickInterval: 50,
minorTickLength: 1,
minorGridLineWidth: 0,
tickInterval: 100,
labels: {
style: {
color: axisColor
}
},
plotLines: [{
value: 0,
width: 0,
color: axisColor
}]
},
exporting: {
enabled: false
},
tooltip: {
enabled: true,
borderColor: crosshairColor,
crosshairs: [{
width: 1,
color: crosshairColor,
},
{
width: 1,
color: crosshairColor,
}],
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+this.y +' & '+ this.x.toFixed(0);
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 1,
borderColor: plotlineColor,
enabled: false,
floating: true,
shadow: true
},
plotOptions: {
series: {
enableMouseTracking: true
},
line: {
color:plotlineColor,
},
},
series: [{
lineWidth: 2,
name: carname,
data: dataArray,
marker: {
color:crosshairColor,
radius: 1
}
}]
});
на моей HTML-странице у меня есть две кнопки для увеличения/уменьшения (+1/-1) числа в текстовом поле, начиная с 200. Число представляет собой координату x на графике. Я хотел бы выделить показанный номер моего текстового поля на графике с помощью другой цвет и большая точка, когда график загружается в первый раз, а также когда пользователь меняет номер с помощью одной из этих кнопок. Как я могу это сделать?
пробовал
chart.series[0].options.data[valueOfTextfield].color = 'yellow';
chart.redraw(true);
в методе onclick кнопки, но он не работает.
Спасибо за ваши ответы!
2 ответов
используйте метод select объекта point http://api.highcharts.com/highcharts#series.точка.события.выберите
С помощью маркер мы можем сделать это:
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, { marker: {
fillColor: '#FF0000',
lineWidth: 3,
lineColor: "#FF0000" // inherit from series
},y:71.5}, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});