Create SVG graph with matplotlib on heroku (displayed in Japanese)

Introduction

Please refer to Past Article for graph creation without Japanese.

Preparation of Japanese font

Prepare a suitable Japanese font file and add it to git. Google's Noto.

$ cd qiita-sin
$ mkdir fonts
$ cp .../NotoSansCJKjp-Medium.otf fonts/

App fix

app.py

#!/bin/env python
# coding: utf-8

import os
import StringIO

from flask import Flask, render_template
import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt
from matplotlib.font_manager import FontProperties
import numpy as np

fontprop = FontProperties(fname='./fonts/NotoSansCJKjp-Medium.otf', size=10)

app = Flask(__name__)
app.debug = True

@app.route('/')
def do_sin():
    x = np.arange(-np.pi, np.pi, 0.1)
    y = np.sin(x)

    fig, ax = plt.subplots(1)
    plt.plot(x, y, label="sin")
    plt.legend(loc="best")

    strio = StringIO.StringIO()
    fig.savefig(strio, format="svg")
    plt.close(fig)

    strio.seek(0)
    svgstr = strio.buf[strio.buf.find("<svg"):]

    return render_template("sin.html", svgstr=svgstr.decode("utf-8"))

@app.route('/sin-jp')
def do_sin_jp():
    x = np.arange(-np.pi, np.pi, 0.1)
    y = np.sin(x)

    fig, ax = plt.subplots(1)
    plt.plot(x, y, label=u"sin curve")
    plt.legend(loc="best", prop=fontprop)
    ax.set_title(u"test", font_properties=fontprop)
    ax.set_xlabel(u"x axis", font_properties=fontprop)
    ax.set_ylabel(u"y axis", font_properties=fontprop)

    strio = StringIO.StringIO()
    fig.savefig(strio, format="svg")
    plt.close(fig)

    strio.seek(0)
    svgstr = strio.buf[strio.buf.find("<svg"):]

    return render_template("sin.html", svgstr=svgstr.decode("utf-8"))

if __name__ == "__main__":
    port = int(os.environ.get("PORT", 5000))
    app.run(port=port)

See https://limitless-garden-3527.herokuapp.com/sin-jp for the completed app

point

Prepare a font file by yourself and create a fontprop, and specify the fontprop when drawing.