Highcharts-3-Гистограмма 1

искусственный интеллект визуализация данных

Highcharts рисует гистограмму

В этой статье описывается, как использоватьpython-highchartsнарисовать гистограмму

  • Горизонтальная/вертикальная столбчатая диаграмма
  • Гистограмма бабочки
  • Столбчатая диаграмма с накоплением

графика

Во-первых, давайте посмотрим непосредственно на конечный эффект:

  • 4 континента
  • годы

Скрыть или показать, когда вы нажимаете на год

Скрыть один из годов:

код

необработанные данные и код

Моделирование данных с пандами

использоватьpandasдля моделирования генерации вышеуказанных данных

# 使用DataFrame数据框

import pandas as pd

data = pd.DataFrame({
    "2000": [107, 31, 235, 203, 24],
    "2004": [133, 156, 947, 868, 106],
    "2008": [373, 914, 854, 732, 34],
    "2012": [652, 954, 1250, 740, 38]},
    
    index=['Africa', 'America', 'Asia', 'Europe', 'Oceania']
)

data

Сгенерируйте 4 необходимыхdataДанные и классификацияcategories:

Графический флип

Реализуйте эффект переворота на приведенном выше графике, то есть отобразите его в виде горизонтальной гистограммы.Посмотрим на окончательный эффект:

Реализованный метод нужно только добавить в указанный выше элемент конфигурации кода:

Полный код выглядит следующим образом:

Параллельная гистограмма

визуализация

исходные данные и код 

from highcharts import Highchart
H = Highchart(width=550, height=400)

# 1、数值分类区间
categories = ['0-4', '5-9', '10-14', '15-19',
              '20-24', '25-29', '30-34', '35-39', 
              '40-44','45-49', '50-54', '55-59', 
              '60-64', '65-69','70-74', '75-79', 
              '80-84', '85-89', '90-94','95-99', '100 + ']
# 2、配置项
# 在这种图形中横轴和纵轴需要调换
options = {
 'chart': {  #  指定图表类型：柱状图
        'type': 'bar' 
    },
    'title': {  # 主标题
        'text': 'Population pyramid for Germany, midyear 2010'
    },
    'subtitle': {  # 副标题
        'text': 'Source: www.census.gov'
    },
    'xAxis': [{  # 左侧标签设置
        'categories': categories,
        'reversed': False,   # 分类区间是否翻转
        'labels': {
            'step': 1  # 标签区间的间隔
        }
    }, {   # 右侧标签设置
        'opposite': True,
        'reversed': False,
        'categories': categories,
        'linkedTo': 0,
        'labels': {
            'step': 1
        }
    }],
    'yAxis': {
        'title': {
            'text': None
        },
        'labels': {  # y轴标签
            'formatter': "function () {\
                                    return (Math.abs(this.value) / 1000000) + 'M';\
                                }"
        },
        'min': -4000000,
        'max': 4000000
    },

    'plotOptions': {
        'series': {
            'stacking': 'normal'
        }
    },

    'tooltip': {
        'formatter': "function () {\
                            return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +\
                                'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);\
                        }"
    },
}

# 设置男女的数值
data_male = [-1746181, -1884428, -2089758, -2222362,
             -2537431, -2507081, -2443179, -2664537, 
             -3556505, -3680231, -3143062, -2721122, 
             -2229181, -2227768,-2176300, -1329968, 
             -836804, -354784, -90569, -28367, -3878]

data_female = [1656154, 1787564, 1981671, 2108575, 
               2403438, 2366003, 2301402, 2519874,
               3360596, 3493473, 3050775, 2759560, 
               2304444, 2426504, 2568938, 1785638,
               1447162, 1005011, 330870, 130632, 21208]

# 添加配置项
H.set_dict_options(options)

# 添加数据和指定图表类型bar
H.add_data_set(data_male, 'bar', 'Male')
H.add_data_set(data_female, 'bar', 'Female')

H

Применимая сцена

Этот тип диаграммы применим, когда между двумя группами есть несколько числовых интервалов.

Столбчатая диаграмма с накоплением — полоса стека

Следующий код является окончательным кодом реализации, полученным путем модификации исходного кода официального сайта.

from highcharts import Highchart   # 导入库 
H = Highchart(width=800, height=600)  # 设置图形的大小

# 配置数据项：根据源码修改
data1 = [5, 3, 4, 7, 2]
data2 = [2, 2, 3, 2, 1]
data3 = [3, 4, 4, 2, 5]

options = {
    'chart': {
        'type': 'bar'  # 图表类型
    },
    'title': {  # 主标题
        'text': 'Stacked bar chart'
    },
    'xAxis': {
        'categories': ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    'yAxis': {
        'min': 0,
        'title': {
            'text': 'Total fruit consumption'
        }
    },
    'legend': {
        'reversed': True
    },
    'plotOptions': {
        'series': {
            'stacking': 'normal'
        }
    }
}

# 增加部分
H.set_dict_options(options)   # 添加配置

H.add_data_set(data1,'bar','John')
H.add_data_set(data2,'bar','Jane')
H.add_data_set(data3,'bar','Joe')

H

Гистограмма с отрицательными значениями — столбец с отрицательными значениями

Как нарисовать гистограмму с отрицательными значениями?

Конфигурация для отображения данных над гистограммой:

Полный код выглядит так:

from highcharts import Highchart   # 导入库 
H = Highchart(width=800, height=600)  # 设置图形的大小

# 配置数据项
data1 = [5, 3, -4, 7, 2]
data2 = [2, 2, 3, -2, 1]
data3 = [-3, 4, 4, 2, 5]

options = {
    'chart': {  # 图表类型不是bar，而是column
        'type': 'column'  
    },
    'title': {  # 主标题
        'text': 'column with negative values'
    },
    'xAxis': {
        'categories': ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    'yAxis': {
        'title': {
            'text': '水果数量',  # y轴名称
            'align': 'high'
        },
        'labels': {
            'overflow': 'justify'
        }
    },
    'legend': {
        'reversed': True
    },
    'credits': {  # 右下角的版权信息
        'enabled': False
    },
    'plotOptions': {   # 将每个数据在柱状图上方显示出来
        'bar': {
            'dataLabels': {
                'enabled': True  # 显示数据（柱状图顶部的数据显示出来）
            }
        }
    }
}

H.set_dict_options(options)   # 添加配置
H.add_data_set(data1,'bar','John')
H.add_data_set(data2,'bar','Jane')
H.add_data_set(data3,'bar','Joe')

H

Финальные рендеры:

Категории