Question

我试图在高图中实现进度条/状态栏，需要为进度条/状态栏显示2种颜色，一种背景颜色和另一种颜色用于状态/进度，使用高图中的堆叠条实现但是第一个矩形在那里面有白色笔触颜色，所以它区分2个矩形，但我需要将其显示为单个矩形而不是2，无论如何要删除该白色笔触颜色以显示为单个。

<html>
<head>
<script src="highchart.js"></script>
</head>
<body>
<div id="container" style="min-width: 100px; max-width: 200px; height: 50px; margin: 0 auto"></div>
<script>
 Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        xAxis: {
            tickColor: '#FFFFFF',
            tickWidth: 1,
            categories: [''],
            labels:{
                        enabled: false
                },
            visible:false
        },
        title:{
            text:''
        },
        yAxis: {
             gridLineColor: '#FFFFFF',
             minorGridLineWidth: 0,
             lineColor: '#FFFFFF',
             gridLineWidth: 0,
             title: {
                text: ''
             },
             labels:{
                    enabled: false
             },
             visible:false
        },
        exporting: { enabled: false },
        legend:{
            enabled: false
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        tooltip: {
                enabled: false
        },
        colors:['#999999', '#8BF30D', '#FFFFFF'],
        series: [
        {
            name: '',
            data: [1]
        }, {
            name: '',
            data: [5]
        },{
            name: '',
            data: [0]
        }]
    });
</script>
</body>
</html>

Answer 1

我认为您应该能够使用Highcharts API中描述的borderWidth参数： http://api.highcharts.com/highcharts/plotOptions.column.borderWidth

plotOptions: {
  series: {
    stacking: 'normal',
    borderWidth: 0
  }
},

当您使用此参数时，您将能够消除列中的白色边框。我已经举例说明了您的图表如何使用此选项：

http://jsfiddle.net/rvj65mor/1/

高图条形图矩形移除笔划

1 个答案: