Highcharts - 更改悬停点的颜色
Highcharts - Change color of hover points
所以,我一直在查看 highcharts API,寻找在悬停图表时更改点背景颜色的选项。
这是我当前的图表:JSFiddle Example
代码:
$(function () {
$('#main-chart').highcharts({
chart: {
type: 'area'
},
plotBorderColor: '#000000',
plotBackgroundColor: '#000000',
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Number of Clicks'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
lineColor: '#4adefa',
color: '#f1faf7',
data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]
}, {
name: 'USSR/Russia',
lineColor: '#44d99f',
color: '#f1faf7',
data: [215, 125, 450, 120, 150, 200, 426, 660, 869, 1060, 900, 340, 429]
}]
});
});
悬停图表时,"point marker" 是一个灰色圆圈 - 我想将其更改为白色背景和绿色边框的圆圈。
这可能吗?
您可以像这样更改标记的颜色:
...
marker: {
fillColor: 'green',
...
如果您希望每个系列的点样式都相同,您可以将此添加到您的 plotOptions
。
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
fillColor: 'white',
lineColor: 'green',
lineWidth: 0
}
}
}
可在此处找到可用的 fiddle:
http://jsfiddle.net/gwdufurk/3/
如果你想让每个系列的点的样式都不同,你可以像这样为每个系列设置 marker.states.hover
属性:
series: [{
name: 'USA',
lineColor: '#4adefa',
color: '#f1faf7',
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
fillColor: 'white',
lineColor: 'green',
lineWidth: 0
}
}
},
data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]
// other series here.
}
请参阅 fiddle 此处 http://jsfiddle.net/gwdufurk/4/。
悬停指针的不同标记颜色,
data: [
{ name: 'Point 1',color: '#4adefa', y: 251 },
{ name: 'Point 2',color: '#000000', y: 122 },
{ name: 'Point 3',color: '#A25429', y: 511 },
{ name: 'Point 4',color: '#AA1111', y: 524 },
{ name: 'Point 5',color: '#DF2500', y: 291 },
{ name: 'Point 6',color: '#007ACF', y: 342 },
{ name: 'Point 7',color: '#ECD66E', y: 110 },
]
请参阅此处 fiddle:http://jsfiddle.net/UI_Designer/gwdufurk/5/
所以,我一直在查看 highcharts API,寻找在悬停图表时更改点背景颜色的选项。
这是我当前的图表:JSFiddle Example
代码:
$(function () {
$('#main-chart').highcharts({
chart: {
type: 'area'
},
plotBorderColor: '#000000',
plotBackgroundColor: '#000000',
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Number of Clicks'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
lineColor: '#4adefa',
color: '#f1faf7',
data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]
}, {
name: 'USSR/Russia',
lineColor: '#44d99f',
color: '#f1faf7',
data: [215, 125, 450, 120, 150, 200, 426, 660, 869, 1060, 900, 340, 429]
}]
});
});
悬停图表时,"point marker" 是一个灰色圆圈 - 我想将其更改为白色背景和绿色边框的圆圈。
这可能吗?
您可以像这样更改标记的颜色:
...
marker: {
fillColor: 'green',
...
如果您希望每个系列的点样式都相同,您可以将此添加到您的 plotOptions
。
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
fillColor: 'white',
lineColor: 'green',
lineWidth: 0
}
}
}
可在此处找到可用的 fiddle: http://jsfiddle.net/gwdufurk/3/
如果你想让每个系列的点的样式都不同,你可以像这样为每个系列设置 marker.states.hover
属性:
series: [{
name: 'USA',
lineColor: '#4adefa',
color: '#f1faf7',
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
fillColor: 'white',
lineColor: 'green',
lineWidth: 0
}
}
},
data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]
// other series here.
}
请参阅 fiddle 此处 http://jsfiddle.net/gwdufurk/4/。
悬停指针的不同标记颜色,
data: [
{ name: 'Point 1',color: '#4adefa', y: 251 },
{ name: 'Point 2',color: '#000000', y: 122 },
{ name: 'Point 3',color: '#A25429', y: 511 },
{ name: 'Point 4',color: '#AA1111', y: 524 },
{ name: 'Point 5',color: '#DF2500', y: 291 },
{ name: 'Point 6',color: '#007ACF', y: 342 },
{ name: 'Point 7',color: '#ECD66E', y: 110 },
]
请参阅此处 fiddle:http://jsfiddle.net/UI_Designer/gwdufurk/5/