miloschuman / yii2-highcharts

Highcharts widget for Yii 2 Framework
http://www.yiiframework.com/extension/yii2-highcharts-widget/
MIT License
166 stars 63 forks source link

Offline Export button does nothing #86

Closed coredan closed 3 years ago

coredan commented 3 years ago

The export button (that appears on the right) does nothing. No clickable.

image

That is my test code:

<?php 
use miloschuman\highcharts\Highcharts;
use yii\web\JsExpression;
?>
<?= Highcharts::widget([
    'scripts' => [
        'modules/exporting',
        'modules/offline-exporting',
        'modules/export-data',
        'themes/dark-unica',
        //'themes/grid-light',
    ],
    'options' => [
        'credits' => ['enabled' => false],                                
        'exporting' => [
            'enabled' => true,
            'chartOptions' => [ // specific options for the exported image
                'plotOptions' => [
                    'series' => [
                        'dataLabels' => [
                            'enabled' => true
                        ]
                    ]
                ]
            ],
            'fallbackToExportServer' => false
        ],
        'title' => [
            'text' => 'Combination chart',
        ],
        'xAxis' => [
            'categories' => ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'],
        ],
        'labels' => [
            'items' => [
                [
                    'html' => 'Total fruit consumption',
                    'style' => [
                        'left' => '50px',
                        'top' => '18px',
                        'color' => new JsExpression('(Highcharts.theme && Highcharts.theme.textColor) || "black"'),
                    ],
                ],
            ],
        ],
        'series' => [
            [
                'type' => 'column',
                'name' => 'Jane',
                'data' => [3, 2, 1, 3, 4],
            ],
            [
                'type' => 'column',
                'name' => 'John',
                'data' => [2, 3, 5, 7, 6],
            ],
            [
                'type' => 'column',
                'name' => 'Joe',
                'data' => [4, 3, 3, 9, 0],
            ],
            [
                'type' => 'spline',
                'name' => 'Average',
                'data' => [3, 2.67, 3, 6.33, 3.33],
                'marker' => [
                    'lineWidth' => 2,
                    'lineColor' => new JsExpression('Highcharts.getOptions().colors[3]'),
                    'fillColor' => 'white',
                ],
            ],
            [
                'type' => 'pie',
                'name' => 'Total consumption',
                'data' => [
                    [
                        'name' => 'Jane',
                        'y' => 13,
                        'color' => new JsExpression('Highcharts.getOptions().colors[0]'), // Jane's color
                    ],
                    [
                        'name' => 'John',
                        'y' => 23,
                        'color' => new JsExpression('Highcharts.getOptions().colors[1]'), // John's color
                    ],
                    [
                        'name' => 'Joe',
                        'y' => 19,
                        'color' => new JsExpression('Highcharts.getOptions().colors[2]'), // Joe's color
                    ],
                ],
                'center' => [100, 80],
                'size' => 100,
                'showInLegend' => false,
                'dataLabels' => [
                    'enabled' => false,
                ],
            ],
        ],
    ]
]);?>

Charts loads OK. Theme loads OK. Scripts loads OK (at the end of the page):

...
</script><script src="/web/assets/a95011c8/jquery.js"></script>
<script src="/web/assets/df35370b/highcharts.src.js"></script>
<script src="/web/assets/df35370b/modules/exporting.src.js"></script>
<script src="/web/assets/df35370b/modules/offline-exporting.src.js"></script>
<script src="/web/assets/df35370b/modules/export-data.src.js"></script>
<script src="/web/assets/3fd1b9b3/yii.js"></script>
<script src="/web/assets/807bc97f/js/bootstrap.js"></script>
...
coredan commented 3 years ago

My mistake. I had a CSS rule that disabled the button: pointer-events: none;

Sorry.