AmChartsによってエクスポートされたPDFファイルのフォントを変更する

Question

AmChartsのドキュメントをナビゲートするのに問題があります。私が実行していると思われる主な問題は、ライセンスされたAmChartsバージョン3.20.3に組み込まれているエクスポートを使ってpdfファイルを作成しているときにデフォルトフォントを変更することに関する情報を見つけることです。私はそれがOpen SansでRobotではないことを望んでいます（pdfMakeのデフォルト）。ただ、輸出の内側} {その後、私はフォントを変更するためにそこに何をする必要があるかの操作を行います。

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を追加することができなければならないことを示唆しているようです。

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} 

が、私はこの考え方には全く正しい軌道に乗っています：pdfMakeのドキュメントに基づいて、私がこの線に沿って何かをする必要がありますように思えますか？私は前にこれをした人を見つけることができないと思うし、それはかなり混乱している。どんな助けも大いに評価されるでしょう...

Answer 1

あなたのフォントを含むカスタムvfs_fonts.jsファイルをbase64で作成する必要があります。 pdfMakeの作成者であるBartekは、そのファイルを作成する方法を細かく書きました。step-by-step tutorial

カスタムフォントファイルを作成したら、手動で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" 
      } 
     }, 
    }, 
    ... 
}); 

をあなたは私がのための1つを作成しましたvfs_fonts.jsファイルを生成するいくつかのトラブルをした場合あなた - download vfs_fonts.js（中古：https://www.google.com/fonts/specimen/Open+Sans）