1

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

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

如果没有设置默认的填充颜色，那么状态填充颜色也不起作用（我猜是因为它们依赖于已经设置为工作的填充颜色属性）。

但是，如果我将默认的 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');
});

});

4

2 回答 2

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

});

于 2013-10-15T14:18:51.867 回答
0

我需要改变盒子的轮廓。不完全一样，但由于我找不到任何东西，我将在此处发布一个示例小提琴。

要点是：

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 });
};
于 2015-04-09T15:03:50.533 回答