Javascript Highcharts图形默认系列fillColor覆盖状态fillColor（包括JSFIDLE）
我希望能够设置箱线图系列的填充颜色，然后在某些状态下覆盖该颜色，悬停并选择 问题是，每当我设置默认的fillColor时，悬停和选择状态都不再起作用，只使用默认的fillColor 如果没有设置默认的fillcolor，那么状态fillcolor也不起作用，我想是因为它们依赖于已经设置为有效的fillcolor属性 但是，如果我将默认fillColor设置为一个无效的设置，如“fsdfrw4jh432”，那么它可以正常工作。也就是说，各州现在都在运作 看看这个JSFIDLE来了解我的意思： 从JSFIDLE中可以看到，悬停和选择状态可以工作，尽管填充颜色以黑色开始，因为它是无效的颜色代码。如果将颜色代码更改为正确的颜色，则状态将不再工作 知道我做错了什么吗 以下是JSFIDLE代码，顺便说一句：Javascript Highcharts图形默认系列fillColor覆盖状态fillColor（包括JSFIDLE）,javascript,highcharts,highstock,Javascript,Highcharts,Highstock,我希望能够设置箱线图系列的填充颜色，然后在某些状态下覆盖该颜色，悬停并选择 问题是，每当我设置默认的fillColor时，悬停和选择状态都不再起作用，只使用默认的fillColor 如果没有设置默认的fillcolor，那么状态fillcolor也不起作用，我想是因为它们依赖于已经设置为有效的fillcolor属性 但是，如果我将默认fillColor设置为一个无效的设置，如“fsdfrw4jh432”，那么它可以正常工作。也就是说，各州现在都在运作 看看这个JSFIDLE来了解我的意思： 从
$(function () {
$('#container').highcharts({
chart: {
type: 'boxplot'
},
title: {
text: 'Highcharts Box Plot Example'
},
legend: {
enabled: false
},
plotOptions: {
series: {
allowPointSelect: true,
states:{
hover: {
enabled: true,
lineWidth: 5,
fillColor: '#0F0'
},
select: {
fillColor: '#F00',
enabled: 'true'
}
},
fillColor: '#00dddddF',
}
},
xAxis: {
categories: ['1', '2', '3', '4', '5'],
title: {
text: 'Experiment No.'
}
},
yAxis: {
title: {
text: 'Observations'
},
plotLines: [{
value: 932,
color: 'red',
width: 1,
label: {
text: 'Theoretical mean: 932',
align: 'center',
style: {
color: 'gray'
}
}
}]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
}, {
name: 'Outlier',
color: Highcharts.getOptions().colors[0],
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[0]
},
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
// the button action
$('#button').click(function() {
var selectedPoints = $('#container').highcharts().getSelectedPoints();
alert ('You selected '+ selectedPoints.length +' points');
});
}) 好的，我为这个bug开发了一个解决方案，人们可以使用它，直到highcharts团队真正修复它 这是jsFiddle 以下是子孙后代的实际代码：
$(function () {
var savedFill ='#2c8';
$('#container').highcharts({
chart: {
type: 'boxplot',
events: {
load: function(event) {
var todayT = $('#container').highcharts();
//console.log(this);
//console.log(this.series[0].data);
//this.series.data[0].pointAttr[''].fill = savedFill;
//this.series.data[0].select();
for (var i=0;i<this.series[0].data.length;i++){
//this.series.data[i].select();
console.log(this.series[0].data[i]);
this.series[0].data[i].select();
console.log(i);
if (i == this.series[0].data.length-1){
this.series[0].data[0].select(false);
}
}
//this.series[0].data[0].unselect();
//this.series[0].data[4].select(false);
}
}
},
title: {
text: 'Highcharts Box Plot Example'
},
legend: {
enabled: false
},
plotOptions: {
series: {
allowPointSelect: true,
states:{
hover: {
enabled: true,
lineWidth: 5,
fillColor: '#0F0'
},
select: {
fillColor: savedFill,
enabled: 'true'
}
},
fillColor: 'notNull',
point: {
events: {
mouseOver: function(e) {
//console.log($('#container').highcharts());
var hChartObj = $('#container').highcharts();
//hChartObj.series[0].update({
// color: '#FF0000'
//});
//this.update({
// color: '#FF0000'
//});
//console.log(this.series.data[0]);
console.log(Object.keys(this.series.data[0].pointAttr));
//console.log(this);
this.series.data[0].pointAttr.hover.fill = '#60d0ff';
this.series.data[0].pointAttr.select.fill = '#ff6081';
this.series.data[0].pointAttr[''].fill = savedFill;
//this.series.data[0].pointAttr.%20.fill = '#ff6081';
//this.series.data[0].pointAttr.fill = {fill:'#60d0ff',stroke:'#2f7ed8',stroke-width:1};
//this.series.data[0].graphic.fill = '#000000';
//this.series.data[0].series.color = '#000000';
//this.series.data[0].box.fill = '#60d0ff';
//console.log('updated');
//console.log(this.series.data[0].pointAttr);
//this.update({
// name: 'yup'
//});
//this.series.data[0].graphic.fill('destroy');
//this.series.data[0].graphic.fill = '#000000';
//hChartObj.series[0].remove(true);
},
mouseOut: function() {
console.log('out');
//this.series.data[0].pointAttr.hover.fill = savedFill;
//console.log(this.series.data[0].pointAttr);
},
select: function() {
this.series.data[0].pointAttr[''].fill = savedFill;
},
unselect: function() {
this.series.data[0].pointAttr[''].fill = savedFill;
}
}
}
}
},
xAxis: {
categories: ['1', '2', '3', '4', '5'],
title: {
text: 'Experiment No.'
}
},
yAxis: {
title: {
text: 'Observations'
},
plotLines: [{
value: 932,
color: 'red',
width: 1,
label: {
text: 'Theoretical mean: 932',
align: 'center',
style: {
color: 'gray'
}
}
}]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
}, {
name: 'Outlier',
color: Highcharts.getOptions().colors[0],
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[0]
},
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
// the button action
$('#button').click(function() {
var selectedPoints = $('#container').highcharts().getSelectedPoints();
alert ('You selected '+ selectedPoints.length +' points');
});
}) 好的，我为这个bug开发了一个解决方案，人们可以使用它，直到highcharts团队真正修复它 这是jsFiddle 以下是子孙后代的实际代码：
$(function () {
var savedFill ='#2c8';
$('#container').highcharts({
chart: {
type: 'boxplot',
events: {
load: function(event) {
var todayT = $('#container').highcharts();
//console.log(this);
//console.log(this.series[0].data);
//this.series.data[0].pointAttr[''].fill = savedFill;
//this.series.data[0].select();
for (var i=0;i<this.series[0].data.length;i++){
//this.series.data[i].select();
console.log(this.series[0].data[i]);
this.series[0].data[i].select();
console.log(i);
if (i == this.series[0].data.length-1){
this.series[0].data[0].select(false);
}
}
//this.series[0].data[0].unselect();
//this.series[0].data[4].select(false);
}
}
},
title: {
text: 'Highcharts Box Plot Example'
},
legend: {
enabled: false
},
plotOptions: {
series: {
allowPointSelect: true,
states:{
hover: {
enabled: true,
lineWidth: 5,
fillColor: '#0F0'
},
select: {
fillColor: savedFill,
enabled: 'true'
}
},
fillColor: 'notNull',
point: {
events: {
mouseOver: function(e) {
//console.log($('#container').highcharts());
var hChartObj = $('#container').highcharts();
//hChartObj.series[0].update({
// color: '#FF0000'
//});
//this.update({
// color: '#FF0000'
//});
//console.log(this.series.data[0]);
console.log(Object.keys(this.series.data[0].pointAttr));
//console.log(this);
this.series.data[0].pointAttr.hover.fill = '#60d0ff';
this.series.data[0].pointAttr.select.fill = '#ff6081';
this.series.data[0].pointAttr[''].fill = savedFill;
//this.series.data[0].pointAttr.%20.fill = '#ff6081';
//this.series.data[0].pointAttr.fill = {fill:'#60d0ff',stroke:'#2f7ed8',stroke-width:1};
//this.series.data[0].graphic.fill = '#000000';
//this.series.data[0].series.color = '#000000';
//this.series.data[0].box.fill = '#60d0ff';
//console.log('updated');
//console.log(this.series.data[0].pointAttr);
//this.update({
// name: 'yup'
//});
//this.series.data[0].graphic.fill('destroy');
//this.series.data[0].graphic.fill = '#000000';
//hChartObj.series[0].remove(true);
},
mouseOut: function() {
console.log('out');
//this.series.data[0].pointAttr.hover.fill = savedFill;
//console.log(this.series.data[0].pointAttr);
},
select: function() {
this.series.data[0].pointAttr[''].fill = savedFill;
},
unselect: function() {
this.series.data[0].pointAttr[''].fill = savedFill;
}
}
}
}
},
xAxis: {
categories: ['1', '2', '3', '4', '5'],
title: {
text: 'Experiment No.'
}
},
yAxis: {
title: {
text: 'Observations'
},
plotLines: [{
value: 932,
color: 'red',
width: 1,
label: {
text: 'Theoretical mean: 932',
align: 'center',
style: {
color: 'gray'
}
}
}]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
}, {
name: 'Outlier',
color: Highcharts.getOptions().colors[0],
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[0]
},
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
// the button action
$('#button').click(function() {
var selectedPoints = $('#container').highcharts().getSelectedPoints();
alert ('You selected '+ selectedPoints.length +' points');
});
}) 我要求改变盒子的轮廓。不太一样，但因为我找不到任何东西，我会发布一个 要点是：
var colorBox = function(point, selected) {
var series = point.series,
seriesOptions = series.options,
seriesStates = seriesOptions.states,
stem = point.stem,
box = point.box,
whiskers = point.whiskers,
medianShape = point.medianShape;
var selectedStroke = seriesStates.select
? seriesStates.select.color
: null;
var stroke = selected
? selectedStroke
: point.color || series.color;
stem.attr({ 'stroke': stroke });
box.attr({ 'stroke': stroke });
whiskers.attr({ 'stroke': stroke });
medianShape.attr({ 'stroke': stroke });
};
我有一个要求改变盒子的轮廓。不太一样，但因为我找不到任何东西，我会发布一个 要点是：
var colorBox = function(point, selected) {
var series = point.series,
seriesOptions = series.options,
seriesStates = seriesOptions.states,
stem = point.stem,
box = point.box,
whiskers = point.whiskers,
medianShape = point.medianShape;
var selectedStroke = seriesStates.select
? seriesStates.select.color
: null;
var stroke = selected
? selectedStroke
: point.color || series.color;
stem.attr({ 'stroke': stroke });
box.attr({ 'stroke': stroke });
whiskers.attr({ 'stroke': stroke });
medianShape.attr({ 'stroke': stroke });
};