Highcharts-4-Гистограмма 2

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

Highcharts-4-Гистограмма 2

В этой статье представлены 3 видаHighchartsПроизводство гистограммы:

  • Столбчатая диаграмма с накоплением
  • Столбчатая диаграмма с групповым накоплением
  • Столбчатая диаграмма с накоплением в процентах

Вертикальная столбчатая диаграмма

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

Давайте посмотрим на общую диаграмму эффекта:

код

Измените исходный код официального сайта и используйтеpython-highchartsрисовать.

  • В параметрах настройки вам нужно изменить строку на столбец
  • В add_set_data вам нужно изменить строку на столбец
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': 'column'   # bar改成column
    },
    'title': {
        'text': 'Stacked column chart'
    },
    'xAxis': {
        'categories': ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    'yAxis': {
        'min': 0,
        'title': {
            'text': 'Total fruit consumption'
        },
        'stackLabels': {
            'enabled': True,
            'style': {
                'fontWeight': 'bold',
                'color': "(Highcharts.defaultOptions.title.style && \
                    Highcharts.defaultOptions.title.style.color) || 'gray'"
            }
        }
    },
    'legend': {
        'align': 'right',
        'x': -30,
        'verticalAlign': 'top',
        'y': 25,
        'floating': True,
        'backgroundColor':
            "Highcharts.defaultOptions.legend.backgroundColor || 'white'",
        'borderColor': '#CCC',
        'borderWidth': 1,
        'shadow': False
    },
    'tooltip': {
        'headerFormat': '<b>{point.x}</b><br/>',
        'pointFormat': '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    # 在这里设置堆叠的信息
    'plotOptions': {   # 将每个数据在柱状图上方显示出来
        'column': {
            'stacking': 'normal',
            'dataLabels': {
                'enabled': True  # 显示数据（柱状图顶部的数据显示出来）
            }
        }
    }
}

H.set_dict_options(options)   # 添加配置

# 将之前的bar改成column即可
H.add_data_set(data1,'column','John')
H.add_data_set(data2,'column','Jane')
H.add_data_set(data3,'column','Joe')

H

Групповая диаграмма с накоплением — стек и групповой столбец

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

Давайте посмотрим на общий эффект:

Есть 4 разных человека и 5 разных фруктов: пользователи разделены по цвету, фрукты разделены на группы

код 

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

# 绘图数据
data1 = [5, 3, 3, 9, 2]
data2 = [7, 5, 4, 3, 5]
data3 = [2, 5, 6, 2, 8]
data4 = [3, 1, 8, 4, 3]

# 配置项
options = {
 'title': {    # 主标题
        'text': '基于性别的水果消费情况'
    },

    'xAxis': {  # x轴的分类数据
        'categories': ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },

    'yAxis': {  # y轴设置
        'allowDecimals': False,
        'min': 0,
        'title': {
            'text': 'Number of fruits'
        }
    },

    'tooltip': {  # 设置显示数据情况
        'formatter': "function () {\
                        return '<b>' + this.x + '</b><br/>' +\
                            this.series.name + ': ' + this.y + '<br/>' +\
                            'Total: ' + this.point.stackTotal;\
                    }"
    },
    'plotOptions': {
        'column': {
            'stacking': 'normal',
#             'pointPadding': 0.2,
#             'borderWidth': 0,
#              'groupPadding': 0.1,  # x轴上每个组之间的距离
            'shadow': False,   # 是否显示柱状图的阴影
            
            'dataLabels': {  # 重点：将数据显示在柱子外面或里面
                'enabled': True,
                'inside': True
            }
        }
    }
}

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

# 添加数据项：stack参数设置
H.add_data_set(data1, 'column', 'John', stack='male' )
H.add_data_set(data2, 'column', 'Joe', stack='male')
H.add_data_set(data3, 'column', 'Jane', stack='female')
H.add_data_set(data4, 'column', 'Janet', stack='female')

H

ключевые элементы конфигурации

Ключевой элемент конфигурации: Как отображать данные снаружи или внутри столбца, а то и напрямую скрывать?

бар с процентами

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

Общая колонка каждого фрукта имеет одинаковую высоту: 100 %; при наведении мыши на

код 

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': 'column'  # 图表类型
    },
    'title': {  # 主标题
        'text': '带有百分比的柱状图'
    },
    'xAxis': {
        'categories': ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    'yAxis': {
        'min': 0,
        'title': {
            'text': 'Total fruit consumption'
        }
    },
    'tooltip': {
        'pointFormat': '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
        'shared': True
    },
    'legend': {
        'reversed': True
    },
    'plotOptions': {
        'series': {   # 将stacking参数设置成percent
            'stacking': 'percent'   # 多种取值：normal+percent
        }
    }
}

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

Важные настройки

Важный пункт настройки:'stacking': 'percent'

Категории