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

时间:2013-09-18 22:48:24

标签: javascript highcharts highstock

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

问题是,无论何时设置默认的fillColor,悬停和选择状态都不再有效,并且只使用默认的fillColor。

如果没有设置默认的fillcolor,那么状态fillColors也不起作用(我猜是因为它们依赖于fillColor属性已被设置为有效)。

但是,如果我将默认fillColor设置为无效设置,如'#fsdfrw4jh432',那么它“sorta”有效。也就是说,各州现在都在工作。

看到这个jsfiddle,看看我的意思: http://jsfiddle.net/wiseguy205/b3CuF/1/

正如你可以从那个jsfiddle看到的那样,悬停和选择状态起作用,尽管填充颜色从黑色开始,因为它是无效的颜色代码。如果将颜色代码更改为正确的颜色,则状态将不再起作用。

任何想法我做错了什么?

这是jsfiddle代码btw:

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

});

2 个答案:

答案 0 :(得分:1)

好的,我为这个bug开发了一个解决方法,人们可以使用它直到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');
});

});

答案 1 :(得分:0)

我要求更改方框的轮廓。不太一样,但由于我找不到任何东西,我会发布一个example fiddle here

重点是:

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 });
};