2

AmCharts のドキュメントをナビゲートするのに苦労しています。私が直面しているように見える主な問題は、ライセンスされた AmCharts バージョン 3.20.3 に組み込まれているエクスポートを通じて PDF ファイルが作成されているときに、デフォルトのフォントを変更することに関する情報を見つけることです。Roboto（pdfMakeのデフォルト）ではなく、Open Sansにしたいです。

export : {
                enabled : true,
                drawing : {
                    menu : [{
                        class : 'export-drawing',
                        menu : [{
                            label : translations['ADD'] + ' ...',
                            menu : [{
                                label : translations['PDF_ANNOTATE_SHAPE']  +' ...',
                                action : 'draw.shapes'
                            }, {
                                label : translations['PDF_ANNOTATE_TEXT'],
                                action : 'text'
                            }]
                        }, {
                            label : translations['PDF_ANNOTATE_CHANGE'] + ' ...',
                            menu : [{
                                label : translations['PDF_ANNOTATE_MODE'] + ' ...',
                                action : 'draw.modes'
                            }, {
                                label : translations['PDF_ANNOTATE_COLOR'] + ' ...',
                                action : 'draw.colors'
                            }, {
                                label : translations['PDF_ANNOTATE_SIZE'] + ' ...',
                                action : 'draw.widths'
                            }, {
                                label : translations['PDF_ANNOTATE_OPACITY'] + ' ...',
                                action : 'draw.opacities'
                            }, 'UNDO', 'REDO']
                        }, {
                            label : translations['PDF_EXPORT'],
                            format : 'PDF',
                            fileName : translations['MY_TEAM_PS'],
                            content : [
                                {
                                    image : 'reference',
                                    alignment : 'center',
                                    fit : [769.89, 523.28] // fit image to A4
                                },
                                reportDataTable
                            ],
                            pageOrientation : 'landscape',
                            styles : {
                                tableHeader : {
                                    fontSize : 8,
                                    bold : true
                                },
                                subheader : {
                                    fontSize : 12,
                                    bold : true
                                },
                                tableCell : {
                                    fontSize : 8,
                                    bold : false
                                },
                                quote : {
                                    italics : true
                                },
                                small : {
                                    fontSize : 8
                                }
                            }
                        }, 'CANCEL']
                    }]
                },

彼らのドキュメントは、エクスポートのすぐ内側に pdfMake : {} を追加して、そこで必要なことを実行してフォントを変更できるようにする必要があることを示唆しているようです。pdfMake のドキュメントに基づいて、次の行に沿って何かをする必要があるようです:

export : {
                pdfMake : {
                    fonts : {
                        OpenSans : {
                            normal : 'OpenSans-Regular.ttf',
                            bold : 'OpenSans-Semibold.ttf',
                            italics : 'OpenSans-Italic.ttf',
                            bolditalics : 'OpenSans-BoldItalic.ttf'
                        }
                    }
                },
                enabled : true,
                drawing : {
                    menu : [{
                        class : 'export-drawing',
                        menu : [{
                            label : translations['ADD'] + ' ...',
                            menu : [{
                                label : translations['PDF_ANNOTATE_SHAPE']  +' ...',
                                action : 'draw.shapes'
                            }, {
                                label : translations['PDF_ANNOTATE_TEXT'],
                                action : 'text'
                            }]
                        }, {
                            label : translations['PDF_ANNOTATE_CHANGE'] + ' ...',
                            menu : [{
                                label : translations['PDF_ANNOTATE_MODE'] + ' ...',
                                action : 'draw.modes'
                            }, {
                                label : translations['PDF_ANNOTATE_COLOR'] + ' ...',
                                action : 'draw.colors'
                            }, {
                                label : translations['PDF_ANNOTATE_SIZE'] + ' ...',
                                action : 'draw.widths'
                            }, {
                                label : translations['PDF_ANNOTATE_OPACITY'] + ' ...',
                                action : 'draw.opacities'
                            }, 'UNDO', 'REDO']
                        }, {... etc}

私はこの考え方で正しい軌道に乗っていますか? 以前にこれを行った人を見つけることができないようで、かなり混乱しています。どんな助けでも大歓迎です...

4

1 に答える 1

3

vfs_fonts.jsbase64 のフォントを含むカスタム ファイルを作成する必要があります。pdfMakeの作成者である Bartek は、そのファイルを作成する方法を段階的に説明するきちんとしたチュートリアルを作成しました。

カスタム フォント ファイルを作成したら、pdfMake.js手動で HTML ドキュメントに含め、vfs_fonts.jsその背後にカスタム ファイルを追加する必要があります。それwindow.pdfMake.fonts以外の場合は、「Roboto」のデフォルトのフォント定義を使用します。

<script src="./amcharts/plugins/export/libs/pdfMake/pdfMake.js" type="text/javascript"></script>
<script src="vfs_fonts.js" type="text/javascript"></script>
<script type="text/javascript">
    pdfMake.fonts = {
        "Open Sans": {
            "normal": 'OpenSans-Regular.ttf',
            "bold": 'OpenSans-Bold.ttf',
            "italics": 'OpenSans-Italic.ttf',
            "bolditalics": 'OpenSans-BoldItalic.ttf'
        }
    }
</script>

カスタム フォントを使用する準備ができました。不足しているのは、次のようなエクスポート構成の適応だけです。

AmCharts.makeChart( {
    "export": {
        "enabled": true,
        "pdfMake": {
            defaultStyle: {
                font: "Open Sans"
            }
        },
    },
    ...
} );

vfs_fonts.js私が作成したファイルの生成に問題がある場合は、vfs_fonts.js をダウンロードしてください(使用: https://www.google.com/fonts/specimen/Open+Sans )

于 2016-04-30T14:50:10.643 に答える