如何使用jQuery选择路径标签

Question

我已经制作了箱形图（Highcharts），这是我的示例：

https://jsfiddle.net/hew8nq5u/

我的代码是：

 Highcharts.chart('container', {

        chart: {
            type: 'boxplot'
        },

        title: {
            text: 'All Patients'
        },

        legend: {
            enabled: true
        },

        xAxis: {
            categories: ['Asia Pacific', 'Europe', 'Latin America', 'North America', 'SWAC'],
            title: {
                text: '      '
            }
        },

        yAxis: {
            title: {
                text: 'Annual Center Volume 2016'
            },
            tickInterval: 5,
            min: 0,
            max: 75
            //plotLines: [{
            //    value: 932,
            //    color: 'red',
            //    width: 1,
            //    label: {
            //        text: 'Theoretical mean: 932',
            //        align: 'center',
            //        style: {
            //            color: 'gray'
            //        }
            //    }
            //}]
        },
        //colors: ['#91e8e1', '#7cb5ec', '#434348', '#90ed7d', '#f7a35c',
        //         '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', ], //updates default colors
        plotOptions: {
            boxplot: {
                fillColor: '#F0F0E0',
                lineWidth: 2,
                upperQuartileColor: 'green',
                lowerQuartileColor: 'green',
                medianColor: '#0C5DA5',
                medianWidth: 3,
                stemColor: '#A63400',
                stemDashStyle: 'solid',
                stemWidth: 1,
                whiskerColor: '#3D9200',
                whiskerLength: '20%',
                whiskerWidth: 3                 
            }
        },
        series: [{
            name: 'Region Runs',
            showInLegend: false,
            //colorByPoint: true,
            color: 'red',
            data: [
                [2, 4, 18, 43, 53],
                [5, 9, 16.5, 32, 52],
                [1, 3, 6, 11.5, 21],
                [3, 9, 20, 38, 73],
                [1, 2, 8, 16, 20]
            ],
            tooltip: {
                headerFormat: '<em>Experiment No {point.key}</em><br/>'
            }
        },
        {
            name: '75th Percentile',
            type: 'line', 
            color: 'red',
            marker: {
                symbol: 'square'
            },

        },
        {
            name: 'Median',
            type: 'line',
            color:'#0C5DA5',
            marker: {
                symbol: 'square'
            },

        },
        {
            name: '25th Percentile',
            type: 'line', 
            color: 'red',
            marker: {
                symbol: 'square'
            },

        },
        {
            name: '90th percentile',
            type: 'line',
            color: '#3D9200',
            marker: {
                symbol: 'square'
            },

        },{
            name: '10th percentile',
            type: 'line',
            color: '#3D9200',
            marker: {
                symbol: 'square'
            },

        }//,
        //{
        //    name: 'IQR',
        //    type: 'line',
        //    color: 'brown',
        //    marker: {
        //        symbol: 'square'
        //    },

        //},
        //{
        //    name: 'Outlier',
        //    color: Highcharts.getOptions().colors[0],
        //    type: 'scatter',
        //    data: [ // x, y positions where 0 is the first category
        //        [0, 128],
        //        [1, 161],
        //        [2, 58],
        //        [3, 204],
        //        [4,42]
        //    ],
        //    marker: {
        //        fillColor: 'white',
        //        lineWidth: 1,
        //        lineColor: Highcharts.getOptions().colors[0]
        //    },

        //    tooltip: {
        //        pointFormat: 'Observation: {point.y}'
        //    }


        //}
        ]

    });

我想让每个盒子（区域）的盒子顶部和盒子底部具有不同的颜色，并且晶须的顶部和晶须的底部具有不同的颜色。 但是框中的所有线条都使用相同的颜色（红色），晶须的顶部和底部使用相同的颜色（绿色）。

我发现目前在highcharts中不可能用不同的颜色来显示底部和顶部。 与顶部和底部晶须相同。 因此，我想通过使用jQuery选择元素“ path”（其类）并在其中添加html来将颜色更改为黄色来解决此问题。 像这样：

$(".highcharts-boxplot-whisker").append("<path fill='none' class='highcharts-boxplot-whisker' stroke='yellow' stroke-width='3' d='M 59.1 80.5 L 71.9 80.5'></path>");

但是我的选择器出了点问题，什么也没发生。 我怎样才能做到这一点？ 预先感谢您的任何帮助。 我要选择的标签

Answer 1

您可以使用jQuery css（）更改边框！ :)

 div { height: 100px; width: 100px; margin: 40px auto; background-color: pink; } 

 <div></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <script> $("div").css("border-top", "5px solid blue"); $("div").css("border-bottom", "5px solid red"); </script>