Попробуйте оффлайн экспорт в Highcharts

Я хочу сделать офлайн-экспорт с помощью highcharts. Вот мой код

import {Chart} from 'highcharts-vue'
import Highcharts from 'highcharts'
import offlineExporting from "highcharts/modules/offline-exporting"
offlineExporting(Highcharts)

Я попытался использовать вместе exporting.js и offline-exporting.js, и это сработало. Это решение проблемы? Если нет, есть ли другое решение?


javascript vue.js export highcharts offline-mode
person efeozkesici    schedule 27.04.2019    source источник
comment
Я попытался использовать вместе exporting.js и offline-exporting.js, и это сработало Так в чем же проблема?   -  person Core972    schedule 27.04.2019
comment
Я просто ищу. Есть ли способ использовать только offline-exporting.js?   -  person efeozkesici    schedule 27.04.2019
comment
Следуя документации: Чтобы использовать модуль, просто включите его после модуля экспорта. Модуль экспорта является обязательной зависимостью, даже если откат отключен. Я не думаю, что это возможно.   -  person Core972    schedule 27.04.2019
comment
Хорошо, спасибо за ваш отзыв.   -  person efeozkesici    schedule 27.04.2019

Ответы (2)


arrow_upward
1
arrow_downward

Чтобы использовать модуль offline-exporting, вам также необходимо импортировать модуль exporting.

Кроме того, вы можете отключить свойство fallbackToExportServer, чтобы при экспорте никогда не использовался сервер экспорта Highcharts.

exporting: {
    ...,
    fallbackToExportServer: false
},

API:

fallbackToExportServer: логическое

Следует ли возвращаться к серверу экспорта, если модуль автономного экспорта не может экспортировать диаграмму на стороне клиента.

...

Интерактивная демонстрация: https://jsfiddle.net/BlackLabel/92dbwLgx/

Справочник по API: https://api.highcharts.com/highcharts/exporting.fallbackToExportServer

Документы: https://www.highcharts.com/docs/export-module/client-side-export.

person ppotaczek    schedule 28.04.2019

arrow_upward
1
arrow_downward

Вам необходимо установить «exporting.fallbackToExportServer» равным «false», чтобы всегда экспортировать диаграмму локально.

http://jsfiddle.net/viethien/rcmpbsL1/

/* Automate testing of module somewhat */

var nav = Highcharts.win.navigator,
    isMSBrowser = /Edge\/|Trident\/|MSIE /.test(nav.userAgent),
    isEdgeBrowser = /Edge\/\d+/.test(nav.userAgent),
    containerEl = document.getElementById('container'),
    parentEl = containerEl.parentNode,
    oldDownloadURL = Highcharts.downloadURL;

function addText(text) {
    var heading = document.createElement('h2');
    heading.innerHTML = text;
    parentEl.appendChild(heading);
}

function addURLView(title, url) {
    var iframe = document.createElement('iframe');
    if (isMSBrowser && Highcharts.isObject(url)) {
        addText(title +
        ': Microsoft browsers do not support Blob iframe.src, test manually'
        );
        return;
    }
    iframe.src = url;
    iframe.width = 400;
    iframe.height = 300;
    iframe.title = title;
    iframe.style.display = 'inline-block';
    parentEl.appendChild(iframe);
}

function fallbackHandler(options) {
    if (options.type !== 'image/svg+xml' && isEdgeBrowser ||
        options.type === 'application/pdf' && isMSBrowser) {
        addText(options.type + ' fell back on purpose');
    } else {
        throw 'Should not have to fall back for this combination. ' +
            options.type;
    }
}

Highcharts.downloadURL = function (dataURL, filename) {
    // Emulate toBlob behavior for long URLs
    if (dataURL.length > 2000000) {
        dataURL = Highcharts.dataURLtoBlob(dataURL);
        if (!dataURL) {
            throw 'Data URL length limit reached';
        }
    }
    // Show result in an iframe instead of downloading
    addURLView(filename, dataURL);
};

Highcharts.Chart.prototype.exportTest = function (type) {
    this.exportChartLocal({
        type: type
    }, {
        title: {
            text: type
        },
        subtitle: {
            text: false
        }
    });
};

Highcharts.Chart.prototype.callbacks.push(function (chart) {
    if (!chart.options.chart.forExport) {
        var menu = chart.exportSVGElements && chart.exportSVGElements[0],
            oldHandler;
        chart.exportTest('image/png');
        chart.exportTest('image/jpeg');
        chart.exportTest('image/svg+xml');
        chart.exportTest('application/pdf');

        // Allow manual testing by resetting downloadURL handler when trying
        // to export manually
        if (menu) {
            oldHandler = menu.element.onclick;
            menu.element.onclick = function () {
                Highcharts.downloadURL = oldDownloadURL;
                oldHandler.call(this);
            };
        }
    }
});

/* End of automation code */


Highcharts.chart('container', {
    exporting: {
        chartOptions: { // specific options for the exported image
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true
                    }
                }
            }
        },
        sourceWidth: 400,
        sourceHeight: 300,
        scale: 1,
        fallbackToExportServer: false,
        error: fallbackHandler
    },

    title: {
        text: 'Offline export'
    },

    subtitle: {
        text: 'Click the button to download as PNG, JPEG, SVG or PDF'
    },

    chart: {
        type: 'area'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

});
#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

<div id="container"></div>

person Hien Nguyen    schedule 28.04.2019