首页 > 解决方案 > 调整浏览器大小时,DataLabel 隐藏在 highcharts 蜘蛛网上

问题描述

当浏览器调整大小时(可能是全屏,但打开元素检查器等),我会遇到这个问题,调整大小后会隐藏一个数据标签。这是调整大小之前的图表 [在此处输入图像描述][1],这是调整大小 [在此处输入图像描述][2] 的图表,这是我的 js:

Highcharts.chart('my_chart', {
        chart: {
            polar: true,
            type: 'line',
            backgroundColor: 'rgba(0, 0, 0, 0.7)'
        },
        legend: {
            itemStyle: {
                color: 'white'
            },
            itemHoverStyle: {
                color: '#F9DC24'
            },
            itemHiddenStyle: {
                color: '#444'
            }
        },
        colors: [
            '#2c85fa',
            '#fc3'
        ],
        title: {
            text: 'Résultats par thème',
            style: {
                color: 'white',
            }
        },
        pane: {
            size: '100%'
        },
        xAxis: {
            categories: <?php echo json_encode($results['sequenceLib']) ?>,
            labels: {
                style: {
                    color: 'white',
                    overflow:"none", 
                    crop:false
                }
            },
            tickmarkPlacement: 'on',
            lineWidth: 0
        },
        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0,
            max:100,
            labels: {
                style: {
                    color: 'white'
                }
            }
        },
        tooltip: {
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            style: {
                color:'white'
            },
            shared: true,
            pointFormat: '<span style="font-weight: bold;color:{series.color}">{series.name}: <b style="color: white">{point.y:,.0f}%</b></span><br/>'
        },

        series: [{
            name: 'Score (%)',
            type: 'area',
            data: <?php echo json_encode($results['sequenceMoyenne']) ?>,
            pointPlacement: 'on',
            dataLabels: {
                enabled: true
            }
        },{
            name: <?php echo json_encode($results['libelleComp'])?>,
            type: 'line',
            data: <?php echo json_encode($results['sequenceMoyenneComp']) ?>,
            pointPlacement: 'on',
            dataLabels: {
                enabled: true
            }
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 600
                },
                chartOptions: {
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom'
                    },
                    pane: {
                        size: '100%'
                    }
                }
            }]
        }

    });

如您所见,我正在从后端(sf1.4)[1] : https ://i.stack.imgur.com/mvBCs.jpg [2]:https://i.stack.imgur获取我的数据.com/yA0TD.jpg

标签: highcharts

解决方案


推荐阅读