Qu'est-ce que Highcharts

Une bibliothèque de visualisation qui s'exécute sur Javascript. Il a les fonctions / caractéristiques suivantes.

JavaScript pur Aucun plug-in requis, juste deux fichiers JS
Différents types de graphiques
Graphique linéaire
Courbe spline
Graphique d'avion
Spline de zone
Graphique à barres horizontales
Graphique à colonnes
Nuage de points
OHLC
Pied de bougie
Gamme de zone
Plage de spline de zone
Sélecteur de gamme
Afficher rapidement les données de séries chronologiques
Sélectionnez la plage horaire 1 mois, 1 an, désignation de la date
Tableau de plage de temps de zoom
Étiquette de pointe d'outil
Afficher des informations sur les séries de données et les points dans le texte de l'infobulle
Déplacez la souris sur le graphique pour voir les info-bulles
Exporter et imprimer Cliquez sur le bouton * pour exporter dans le format spécifié PNG、JPG、PDF、SVG
Imprimez des graphiques directement à partir de pages Web

C'est très sophistiqué, mais il y a des frais pour une utilisation commerciale.

Pourquoi Highcharts?

beau

Comme vous pouvez le voir sur l'exemple sur le Site officiel, vous pouvez dessiner un graphique beau et cool sans aucune ingéniosité.

Lumière

C'est explosif. À titre d'exemple, dessinons un diagramme de dispersion dans lequel 1000 points, comme indiqué ci-dessous, sont codés par couleur en 7 groupes.

import numpy as np
import pandas as pd

num = 1000
x, y = np.random.random((2, num))
labels = np.random.choice(['a', 'b', 'c', 'e', 'f', 'g', 'h'], num)
df = pd.DataFrame(dict(x=x, y=y, label=labels))

Comparons-le avec les trois bibliothèques typiques suivantes.

Matplotlib
Bokeh
Plotly

Matplotlib

import matplotlib.pyplot as plt
groups = df.groupby('label')
colors = 'bgrcmyk'
for i, (name, group) in enumerate(groups):
    plt.scatter(group.x, group.y, color=colors[i])

Bokeh

from bokeh.charts import Scatter, output_notebook, show
output_notebook()
show(Scatter(x='x', y='y', color='label', data=df))

Plotly

from plotly.offline import init_notebook_mode, iplot
init_notebook_mode()
groups = df.groupby('label')
data = [{'x': group.x, 'y': group.y, 'mode': 'markers', 'name': name} for name, group in groups]
fig = {'data': data}
iplot(fig)

Highcharts

from highcharts import Highchart

groups = df.groupby('label')
options = {
    'chart': {
        'type': 'scatter',
    },
}
H = Highchart()
H.set_dict_options(options)
for name, group in groups:
    data = list(zip(group.x, group.y))
    H.add_data_set(data, 'scatter', name)
H

Le résultat ressemble à ceci.

Y compris l'importation (initialisation)

import (initialisation) non inclus

Il y a plusieurs raisons possibles, mais c'est léger.

%% html implémenté avec magie

Highcharts est une bibliothèque JavaScript, vous devrez donc faire quelques astuces pour l'utiliser avec votre notebook Jupyter. Il existe un moyen d'utiliser un moteur de template, etc., mais à titre d'exemple simple, utilisons %% html magic.

from IPython.display import HTML

%%html
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <div id="container" style="width:300px; height:200px;"></div>
    <script>
        plot = function () { 
            $('#container').highcharts({
                chart: {
                    type: 'line'
                },
                series: [{
                    data: [1, 2, 3]
                }]
            });
        };
        plot();
    </script>

Implémenté avec python-highchart

Dans la magie %% html mentionnée ci-dessus, vous n'écrivez que du JavaScript, pas du Python. De plus, lorsque vous souhaitez gérer des variables, vous devez utiliser un moteur de modèle, etc., ce qui est gênant.

Alors, utilisons python-highcharts, qui peut appeler Highcharts depuis Python.

Installation

Vous pouvez l'installer avec pip.

pip install python-highcharts

Graphique linéaire

Si vous implémentez le même graphe linéaire implémenté par %% html magic comme décrit ci-dessus avec python-highcharts, ce sera comme suit.

from highcharts import Highchart

H = Highchart(width=300, height=200)
H.add_data_set([1, 2, 3])
H

C'est très propre et peut maintenant être écrit en Python.

Options de graphique

Pour l'apparence du graphique, passez une valeur de type dictionnaire à highcharts.Highchart.set_options (). Consultez la référence Highcharts (http://api.highcharts.com/highcharts) pour connaître les valeurs possibles.

from highcharts import Highchart

H = Highchart(width=300, height=200)
options = {
    'title': {
        'text': 'Titre principal'
    },
    'subtitle': {
        'text': 'Sous-titre'
    },
    'xAxis': {
        'title': {'text': 'Axe X'}
    },
    'yAxis': {
        'title': {'text': 'Axe Y'},
        'lineWidth': 2
    },
}
H.set_dict_options(options)
H.add_data_set([1, 2, 3])
H

Il est également possible de régler pour chaque paramètre individuel. Cela peut être plus lisible.

from highcharts import Highchart

H = Highchart(width=300, height=200)
H.set_options('title', {'text': 'Titre principal'})
H.set_options('subtitle', {'text': 'Sous-titre'})
H.set_options('xAxis', {'title': {'text': 'Axe X'}})
H.set_options('yAxis', {'title': {'text': 'Axe Y'}, 'lineWidth': 2})
H.add_data_set([1, 2, 3])
H

L'apparence de l'élément est définie avec highcharts.Highchart.add_data_set ().

from highcharts import Highchart

H = Highchart(width=300, height=200)
H.add_data_set([1, 2, 3], dashStyle='ShortDash', color='plum', lineWidth=6)
H

Type de graphique

Spécifiez le type de graphique dans le deuxième argument de highcharts.Highchart.add_data_set (). La spécification de chaque paramètre de position est la suivante.

Paramètres de position	objet	Moule
1	base de données	Liste, taple
2	Type de graphique	Chaîne
3	Nom	Chaîne

Dans l'exemple ci-dessous, le premier élément génère un graphe plan nommé «data1», et le deuxième élément génère un histogramme nommé «data2».

from highcharts import Highchart

H = Highchart(width=300, height=200)
H.add_data_set([1, 2, 3], 'area', 'data1')
H.add_data_set([4, 5, 6], 'bar', 'data2')
H

Explorer

Cliquer sur un élément graphique fera apparaître un autre graphique ... et ainsi de suite.

Passez les données du dictionnaire à chaque élément de highcharts.Highchart.add_data_set (). Définissez la clé du dictionnaire sur drilldown et la valeur sur le nom correspondant à l'exploration.

Pour spécifier l'élément après l'exploration vers le bas, spécifiez les trois arguments du paramètre de position décrit ci-dessus dans highcharts.Highchart.add_drilldown_data_set (). Faites correspondre le troisième nom avec l'élément supérieur.

from highcharts import Highchart

H = Highchart(width=400, height=200)
data = [{
    'y': 1,
    'drilldown': 'a'
}, {
    'y': 2,
    'drilldown': 'b'
}, {
    'y': 3,
    'drilldown': 'c'
}]
H.add_data_set(data, 'column')
H.add_drilldown_data_set([0.3, 0.4, 0.3], 'pie', 'a')
H.add_drilldown_data_set([4, 5, 6], 'line', 'b')
H.add_drilldown_data_set([7, 8, 9], 'area', 'c')
H

Bonus (piratage Yakiu)

À titre d'exemple d'utilisation de l'exploration, créons un graphique qui affiche le nombre de victoires de 12 équipes de baseball professionnelles en 2016 sur un graphique à barres, et clique sur chaque élément pour afficher le nombre de victoires du lanceur.

import pandas as pd
from highcharts import Highchart


class Team:
    def __init__(self):
        self.team_names = ['Hawks', 'Fighters', 'Marines', 'Lions',
                           'Buffaloes', 'Eagles', 'Swallows', 'Giants',
                           'Tigers', 'Carp', 'Dragons', 'BayStars']
        self.urls = [self.make_url(x) for x in self.team_names]
        self.dfs = [self.load_pitcher_win_data(url) for url in self.urls]
        self.wins = [df['win'].sum() for df in self.dfs]
        self.team_data = [
            self.make_y_dict(team_name, wins)
            for team_name, wins in zip(self.team_names, self.wins)
        ]
        self.pitcher_data = [df.values.tolist() for df in self.dfs]

    def make_url(self, team_name):
        def join_url(x):
            return ''.join(('http://npb.jp/bis/2016/stats/idp1_', x, '.html'))

        if team_name == 'Buffaloes':
            return join_url('bs')
        elif team_name == 'BayStars':
            return join_url('db')
        else:
            return join_url(team_name[0].lower())

    def load_pitcher_win_data(self, url):
        tables = pd.read_html(url)
        df = tables[0].iloc[2:, [1, 3]]
        df.columns = ['pitcher', 'win']
        df['win'] = df['win'].astype(float)
        return df[df['win'] > 0]

    def make_y_dict(self, team_name, wins):
        return {'name': team_name, 'y': wins, 'drilldown': team_name}

t = Team()

options = {
    'chart': {
        'type': 'column'
    },
    'title': {
        'text': 'Nombre de victoires en 2016'
    },
    'subtitle': {
        'text': 'Click the columns to view pitchers.'
    },
    'xAxis': {
        'type': 'category'
    },
    'yAxis': {
        'title': {
            'text': 'win'
        }
    },
    'legend': {
        'enabled': False
    },
    'plotOptions': {
        'series': {
            'borderWidth': 0,
            'dataLabels': {
                'enabled': True,
            }
        }
    },
    'tooltip': {
        'headerFormat':
        '<span style="font-size:11px">{series.name}</span><br>',
    },
}


H = Highchart(width=850, height=400)
H.set_dict_options(options)
H.add_data_set(t.team_data, 'column', "Team", colorByPoint=True)
for i, team_name in enumerate(t.team_names):
    H.add_drilldown_data_set(
        t.pitcher_data[i], 'column', team_name, name=team_name)
H

Implémenté avec pandas-highcharts

Installation

Vous pouvez l'installer avec pip.

pip install pandas-highcharts

Comme son nom l'indique, il dessine des pandas DataFrames avec Highcharts. Vous pouvez générer un graphique simplement en passant les mêmes arguments que pandas.DataFrame.plot () to pandas_highcharts.display.display_charts.

import pandas as pd
from pandas_highcharts.display import display_charts

df = pd.DataFrame([1, 2, 3], index=[list('abc')])
display_charts(df, figsize=(300, 200))

La spécification du type de graphique est identique à celle des pandas.

import pandas as pd
from pandas_highcharts.display import display_charts

df = pd.DataFrame([1, 2, 3], index=[list('abc')])
display_charts(df, kind='bar', figsize=(300, 200))

En termes de fonctionnalités, python-highcharts est plus abondant, mais si vous souhaitez visualiser les données des pandas, c'est plus facile.

[PYTHON] Graphiques élevés dans le notebook Jupyter

Qu'est-ce que Highcharts

Pourquoi Highcharts?

beau

Lumière

Y compris l'importation (initialisation)

import (initialisation) non inclus

%% html implémenté avec magie

Implémenté avec python-highchart

Installation

Graphique linéaire

Options de graphique

Type de graphique

Explorer

Bonus (piratage Yakiu)

Implémenté avec pandas-highcharts

Installation