1

boxplot シリーズの塗りつぶしの色を設定し、特定の状態 (ホバーして選択) でその色をオーバーライドできるようにしたいと考えています。

問題は、デフォルトのfillColorを設定するたびに、ホバーと選択の状態が機能しなくなり、デフォルトのfillColorのみが使用されることです。

デフォルトのfillcolorが設定されていない場合、状態の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');
});

});

4

2 に答える 2

1

わかりました、ハイチャート チームが実際にパッチを適用するまで、このバグの回避策を開発しました。

これが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 に答える