javascript - Highcharts 图表默认系列 fillColor 覆盖状态 fillColors (包括 jsfiddle)

Question

我希望能够设置箱线图系列的填充颜色，然后在某些状态下覆盖该颜色(悬停并选择)。

问题是，每当我设置默认填充颜色时，悬停和选择状态都不再起作用，并且仅使用默认填充颜色。

如果未设置默认填充颜色，则状态 fillColors 也不起作用(我猜是因为它们依赖于已设置为起作用的 fillColor 属性)。

但是，如果我将默认 fillColor 设置为无效设置，例如“#fsdfrw4jh432”，那么它“有点”有效。也就是说，状态现在起作用了。

请参阅此 jsfiddle 以了解我的意思: http://jsfiddle.net/wiseguy205/b3CuF/1/

正如您从 jsfiddle 中看到的，悬停和选择状态有效，尽管填充颜色开始为黑色，因为它是无效的颜色代码。如果将颜色代码更改为正确的颜色，则状态将不再起作用。

知道我做错了什么吗？

这是 jsfiddle 代码顺便说一句:

$(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');
});

});

Answer 1

好吧，我为这个错误开发了一个解决方法，人们可以使用它，直到 highcharts 团队真正修补它。

这是 jsFiddle。

http://jsfiddle.net/b3CuF/16/

这是后代的实际代码:

$(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');
});

});