Question

我希望盒子的顶部和盒子的底部有不同的颜色，并且每个盒子（区域）还有不同颜色的胡须和胡须的顶部。但是盒子里的所有线条都是相同的颜色（红色），而晶须的顶部和底部是相同的颜色（绿色）

带有重现步骤的实时演示

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

 <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/highcharts-3d.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/highcharts-more.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>

Box Plot Charts -->
  <div id="pdfContentHolder" style="margin:auto; width: 720px; height: 800px;">
       <div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto" >
                
       </div>
  </div>

https://jsfiddle.net/hew8nq5u/

先谢谢你们！

Answer 1

目前在Highcharts中不可能使用不同颜色的盒子底部和顶部。与顶部和底部胡须相同。以下是来自 github问题（https://github.com/highcharts/highcharts/issues/6796）的解释和增强命题：

目前，每个框都是单个SVG形状，并且应用了边框   笔划参数，对于较小的边缘不能“分离”。作为一个   结果，您只能应用单一颜色。

你的目标需要重建盒子图的核心，所以我们不能威胁它   作为一个错误，但功能请求。

在Highchart中为Box Plot的每个部分设置单独的颜色

1 个答案: