Yii2使用miloschuman/highcharts扩展的Scatter散点图响应式配置失效问题

问题原因 #

1. 未给图表容器设置自适应宽度，固定宽度的容器不会触发Highcharts的响应式规则
2. 响应式断点设置覆盖范围不足，仅配置了maxWidth=500的规则，平板设备宽度普遍在500-768区间，无法触发该规则
3. yii2-highcharts扩展依赖的Highcharts核心库版本过低，responsive配置是Highcharts 5.0版本后新增的功能，低版本不支持
4. 未配置全局默认legend属性，默认值和响应式配置冲突导致规则被覆盖

解决方案 #

修正后的完整配置代码如下：

<?php 
use miloschuman\highcharts\Highcharts; 
echo Highcharts::widget([
    // 给图表容器设置100%宽度，支持随父容器宽度自适应
    'htmlOptions' => [
        'style' => 'width: 100%; min-height: 400px;'
    ],            
    'options' => [
        // 先配置全局默认的legend属性，避免和响应式规则冲突
        'legend' => [
            'enabled' => false, // 宽度大于768时的默认配置，可根据实际需求调整
        ],
        'responsive' => [
            'rules'=> [
                // 平板适配断点：宽度小于768时触发
                [
                    'condition' => [
                        'maxWidth' => 768,
                    ],
                    'chartOptions' => [
                        'legend' => [
                            'enabled' => true,
                            'align' => 'center',
                            'verticalAlign' => 'bottom',
                            'layout' => 'horizontal',
                        ],
                    ],
                ],
                // 手机适配断点：宽度小于500时触发，可额外调整小屏适配参数
                [
                    'condition' => [
                        'maxWidth' => 500,
                    ],
                    'chartOptions' => [
                        'legend' => [
                            'itemStyle' => [
                                'fontSize' => '12px'
                            ]
                        ],
                    ],
                ]
            ],                                
        ], 

    ]); 
?>

如果配置后仍不生效，可执行以下命令更新扩展到最新版本：
composer update miloschuman/yii2-highcharts

内容的提问来源于stack exchange，提问作者Bhavi Tanwani