Highcharts-12-绘制基础折线图

皮大大

发布于 2021-03-23 11:39:07

1.4K0

发布于 2021-03-23 11:39:07

文章被收录于专栏：机器学习/数据可视化

Highcharts-12-绘制基础折线图

本文中介绍的是如何利用python-highcharts绘制折线图

指定x轴数据标签
显示点值的数据
显示最值和均值的折线图
可缩放的X轴

指定x轴数据标签

效果

代码

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

options = {
	'title': {
		'text': '2014 ~ 2021 年太阳能行业就业人员发展情况'
	},
	'subtitle': {
		'text': '数据来源：thesolarfoundation.com'
	},

	'yAxis': {
		'title': {
			'text': '就业人数'
		}
	},
	'legend': {
		'layout': 'vertical',
		'align': 'right',
		'verticalAlign': 'middle'
	},
	'plotOptions': {
		'series': {
			'label': {
				'connectorAllowed': False
			},
			'pointStart': 2014,
		}
 	}
}

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

data1 = [13934, 12503, 8177, 9658, 7031, 9931, 37133]
data2 = [24916, 24064, 29742, 29851, 32490, 30282, 38121]
data3 = [11744, 17722, 16005, 19771, 20185, 24377, 32147]
data4 = [10993,8773, 7988, 12169, 15112, 22452, 34400]
data5 = [12908, 5948, 8105, 11248, 8989, 11816, 18274]

H.add_data_set(data1, 'line', '安装/施工')
H.add_data_set(data2, 'line', '工人')
H.add_data_set(data3, 'line', '销售')
H.add_data_set(data4, 'line', '项目开发')
H.add_data_set(data5, 'line', '其他')

H

显示点值的数据

效果

代码

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

data_Tokyo = [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
data_NY = [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
data_Berlin = [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
data_London = [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]


options = {
    'chart': {'zoomType': 'x'},
    'colors': {},
    'xAxis': {
        'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    'yAxis':{
        'title': { 'text': 'Temperature (°C)'},
        'plotLines': {
            'value': 0,
            'width': 1,
            'color': '#808080'
        }
    },
    'tooltip': {'valueSuffix': '°C'},
    'legend': {
        'layout': 'vertical',
        'align': 'right',
        'verticalAlign': 'middle',
        'borderWidth': 0
    },
    'plotOptions': {
        'line': {
                'dataLabels': {
                    # 开启数据标签，显示数据
                    'enabled': True
                },
            # 关闭鼠标跟踪，对应的提示框、点击事件会失效
            'enableMouseTracking': True
        }
    }
}

# 逐行添加配置

# H.set_options('chart', {'zoomType': 'x'})
# H.set_options('xAxis', {'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
# 	'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']})

# H.set_options('yAxis',{ 'title': { 'text': 'Temperature (°C)'},
#             'plotLines': {'value': 0, 'width': 1, 'color': '#808080'}})
# H.set_options('tooltip', {'valueSuffix': '°C'})

# H.set_options('legend', {'layout': 'vertical','align': 'right',
# 	'verticalAlign': 'middle','borderWidth': 0})
# H.set_options('colors',{})
# H.set_options('plotOptions',{'line': {
#                 'dataLabels': {
#                     'enabled': True
#                 }}})


# 添加配置项
# 添加的是自己配置字典类型的数据
H.set_dict_options(options)

H.add_data_set(data_Tokyo, 'line', 'Tokyo')
H.add_data_set(data_NY, 'line', 'New York')
H.add_data_set(data_Berlin, 'line', 'Berlin')
H.add_data_set(data_London, 'line', 'London')

H

重点配置的部分：

显示最值和均值的折线图

比如我们想绘制一个月中最大值和最小值以及相应均值的天气气温折线图

效果

代码

from highcharts import Highchart
H = Highchart(width=750, height=600)

# 设置日期和最值
ranges = [
    [1246406400000, 14.3, 27.7],
    [1246492800000, 14.5, 27.8],
    [1246579200000, 15.5, 29.6],
    [1246665600000, 16.7, 30.7],
    [1246752000000, 16.5, 25.0],
    [1246838400000, 17.8, 25.7],
    [1246924800000, 13.5, 24.8],
    [1247011200000, 10.5, 21.4],
    [1247097600000, 9.2, 23.8],
    [1247184000000, 11.6, 21.8],
    [1247270400000, 10.7, 23.7],
    [1247356800000, 11.0, 23.3],
    [1247443200000, 11.6, 23.7],
    [1247529600000, 11.8, 20.7],
    [1247616000000, 12.6, 22.4],
    [1247702400000, 13.6, 19.6],
    [1247788800000, 11.4, 22.6],
    [1247875200000, 13.2, 25.0],
    [1247961600000, 14.2, 21.6],
    [1248048000000, 13.1, 17.1],
    [1248134400000, 12.2, 15.5],
    [1248220800000, 12.0, 20.8],
    [1248307200000, 12.0, 17.1],
    [1248393600000, 12.7, 18.3],
    [1248480000000, 12.4, 19.4],
    [1248566400000, 12.6, 19.9],
    [1248652800000, 11.9, 20.2],
    [1248739200000, 11.0, 19.3],
    [1248825600000, 10.8, 17.8],
    [1248912000000, 11.8, 18.5],
    [1248998400000, 10.8, 16.1]
]

# 日期和均值
averages = [
    [1246406400000, 21.5],
    [1246492800000, 22.1],
    [1246579200000, 23],
    [1246665600000, 23.8],
    [1246752000000, 21.4],
    [1246838400000, 21.3],
    [1246924800000, 18.3],
    [1247011200000, 15.4],
    [1247097600000, 16.4],
    [1247184000000, 17.7],
    [1247270400000, 17.5],
    [1247356800000, 17.6],
    [1247443200000, 17.7],
    [1247529600000, 16.8],
    [1247616000000, 17.7],
    [1247702400000, 16.3],
    [1247788800000, 17.8],
    [1247875200000, 18.1],
    [1247961600000, 17.2],
    [1248048000000, 14.4],
    [1248134400000, 13.7],
    [1248220800000, 15.7],
    [1248307200000, 14.6],
    [1248393600000, 15.3],
    [1248480000000, 15.3],
    [1248566400000, 15.8],
    [1248652800000, 15.2],
    [1248739200000, 14.8],
    [1248825600000, 14.4],
    [1248912000000, 15],
    [1248998400000, 13.6]
        ]

options = {
    'title': {
        'text': '8月份天气变化趋势'
    },
    'xAxis': {
        'type': '时间'
    },
    'yAxis': {
        'title': {
            'text': None
        }
    },
    'tooltip': {
        'crosshairs': True,
        'shared': True,
        'valueSuffix': '°C'
    },
    'legend': {
    }
}

H.set_dict_options(options)

H.add_data_set(averages,
               'line',
               'Temperature',
               zIndex=1,
               marker={
                'fillColor': 'white',
                'lineWidth': 2,
                'lineColor': 'Highcharts.getOptions().colors[0]'  # 颜色设置
            })

H.add_data_set(ranges,
               'arearange',
               'Range',
               lineWidth=0,
               linkedTo=':previous',
               color='Highcharts.getOptions().colors[8]',
               fillOpacity=0.3,
               zIndex=0 )

H

可缩放的X轴

特别适合做和时间相关的图形

效果

代码

import datetime
from highcharts import Highchart

H = Highchart()

H.set_options('chart', {'zoomType': 'x'})  # 设置可缩放
H.set_options('xAxis', {'type': 'datetime',
            'minRange': 14 * 24 * 360000})

H.set_options('yAxis',{ 'title': { 'text': 'Exchange rate'}})
H.set_options('title', {'text': 'USD to EUR exchange rate from 2006 through 2008'})
H.set_options('legend', {'enabled': False})


# 长度1096，几乎刚好是3年（2006，2007，2008）
data =  [0.8446, 0.8445, 0.8444, 0.8232, ..., 0.7095
]   

H.add_data_set(data, 'area', 'USD to EUR', pointInterval=24 * 3600 * 100, 
	pointStart=datetime.datetime(2006,1,1))
H.set_options('plotOptions', {
            'area': {
                'fillColor': {
                    'linearGradient': { 'x1': 0, 'y1': 0, 'x2': 0, 'y2': 1},
                    'stops': [
                        [0, "Highcharts.getOptions().colors[0]"],
                        [1, "Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')"]
                    ]},
                'marker': {
                    'radius': 2
                },
                'lineWidth': 1,
                'states': {
                    'hover': {
                        'lineWidth': 1
                    }
                },
                'threshold': None
            }
        })

H

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-3-19，如有侵权请联系 cloudcommunity@tencent.com 删除

highcharts

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

highcharts

登录后参与评论

0 条评论

热度

Highcharts-12-绘制基础折线图

Highcharts-12-绘制基础折线图

Highcharts-12-绘制基础折线图

指定x轴数据标签

效果

代码

显示点值的数据

效果

代码

显示最值和均值的折线图

效果

代码

可缩放的X轴

效果

代码

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐