Python使用Flask框架，结合Highchart，自定义图表样式主题
参考链接：https://www.highcharts.com.cn/docs/themes
1.使用官方提供的主题js文件，只需要在 highcharts.js 后引入对应的文件即可，不用修改原有的js文件
示例代码：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个 Highcharts 图表</title> <!-- 引入 jquery.js -->
<script src="static/jquery-3.3.1.min.js"></script>
<!-- 引入 highcharts.js -->
<script src="static/highcharts-7.0.3.js"></script>
{# 使用官方提供的主题#}
<script src="https://img.highcharts.com.cn/highcharts/themes/dark-unica.js"></script> </head>
<body> <!-- 图表容器 DOM -->
<div id="container" style="min-width:400px;height:400px"></div> <script src="static/b.js"></script>
</body>
</html>
2.自定义主题文件。
将图表的样式和数据配置分离是非常有必要的，样式分离后独立成主题可以在对页面上所有图表有效。
创建主题文件很简单，只需要将样式相关配置通过 Highcharts.setOptions() 函数生效（这也是我们提供的主题使用的方法）
示例代码：
js代码：
需要注意的是设置的主题配置一定要要在图表数据前面，否则不生效，原有的html页面不用修改
Highcharts.theme = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
},
title: {
style: {
color: '#2970f9',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'blue'
},
itemHoverStyle: {
color: 'gray'
}
}
};
// 使主题配置生效
Highcharts.setOptions(Highcharts.theme);
var chart = Highcharts.chart('container', {
title: {
text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
},
subtitle: {
text: '数据来源：thesolarfoundation.com'
},
yAxis: {
title: {
text: '就业人数'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: '安装，实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: '工人',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: '销售',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: '项目开发',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: '其他',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
另一个注意的事项：
若是html页面引用官方官方提供的js主题文件和js代码中自定义的主题同时存在，以后者自己在js中自定义的为准。
Python使用Flask框架，结合Highchart，自定义图表样式主题的更多相关文章
- 使用Python的Flask框架，结合Highchart，动态渲染图表(Ajax 请求数据接口)
参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...
- python之Flask框架
一.简单的Flask框架 1)flask简介 Flask 是一个 web 框架.也就是说 Flask 为你提供工具,库和技术来允许你构建一个 web 应用程序. 这个 wdb 应用程序可以使一些 we ...
- Python之Flask框架项目Demo入门
Python+Flask框架项目Demo入门 本例子用到了 Flask+蓝图+Flask-Login+SQLAlchemy+WTForms+PyMySQL相关架构 Flask Web框架介绍 Flas ...
- Python基于Flask框架配置依赖包信息的项目迁移部署小技巧
一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...
- Python的Flask框架入门-Ubuntu
全文请见tuts code:An Introduction to Python's Flask Framework Flask是Python一个小而强大的web框架.学起来简单,用起来也容易,能够帮你 ...
- 使用Python的Flask框架，结合Highchart，动态渲染图表
服务端动态渲染图表 参考文章链接:https://www.highcharts.com.cn/docs/dynamic-produce-html-page 参考文章是使用php写的,我这边改用pyth ...
- Python使用Flask框架，结合Highchart，自定义基本上算是最全的导出菜单了
说用:引入export-data.js文件后,导出菜单中会自动显示出相应的导出选项,只需要在lang中换成中文名即可. 本实例除了包含系统自带的,还包括自定义的导出菜单等. html代码 <!D ...
- Python使用Flask框架，结合Highchart，自定义导出菜单项目及顺序
参考链接: https://www.highcharts.com.cn/docs/export-module-overview https://api.hcharts.cn/highcharts#ex ...
- Python使用Flask框架，结合Highchart处理csv数据(引申-从文件获取数据--从数据库获取数据)
参考链接:https://www.highcharts.com.cn/docs/process-text-data-file 1.javascript代码 var options = { chart: ...
随机推荐
- CCF 201409-1 相邻数对 (水题)
问题描述 给定n个不同的整数,问这些数中有多少对整数,它们的值正好相差1. 输入格式 输入的第一行包含一个整数n,表示给定整数的个数. 第二行包含所给定的n个整数. 输出格式 输出一个整数,表示值正好 ...
- Linux 系统管理命令 - free - 查看系统内存信息
命令详解 重要星级: ★★★★★ 功能说明: free 命令用于显示系统内存状态,具体包括系统物理内存.虚拟内存.共享内存和系统缓存等. 语法格式: free [option] free [选项] 说 ...
- ASP.NET Core MVC 打造一个简单的图书馆管理系统 (修正版)（五）外借/阅览图书信息的增删改查
前言: 本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作. 本系列文章主要参考资料: 微软文档:https://docs.microsoft.com/zh-cn/asp ...
- poj 2398 Toy Storage【二分+叉积】
二分点所在区域,叉积判断左右 #include<iostream> #include<cstdio> #include<cstring> #include<a ...
- 洛谷P4206 [NOI2005]聪聪与可可（期望dp+最短路）
传送门 首先,猫的走位太飘了……只能预处理…… 先对每一个点跑一遍dijkstra跑出最短路,然后再预处理出$nxt[i][j]$表示当猫在$i$老鼠在$j$时猫下一步会走到哪里 然后考虑dp,设$d ...
- php 打包下载
<?php class zipfile { var $datasec = array (); var $ctrl_dir = array (); var $eof_ctrl_dir = &quo ...
- bzoj1925 [Sdoi2010] 地精部落【DP】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1925 一个多月前“过”了这道题,还自欺欺人地认为懂了这道题,这直接导致了昨晚多校联测2的T3 ...
- 题解报告：NYOJ #311完全背包（恰好装满）
描述: 直接说题意,完全背包定义有N种物品和一个容量为V的背包,每种物品都有无限件可用.第i种物品的体积是c,价值是w.求解将哪些物品装入背包可使这些物品的体积总和不超过背包容量,且价值总和最大.本题 ...
- 牛客小白月赛5-D-阶乘（求n内每个数的阶乘相乘后尾数为0的个数）
题目描述 输入描述: 输入数据共一行,一个正整数n,意义如“问题描述”. 输出描述: 输出一行描述答案:一个正整数k,表示S的末尾有k个0 输入例子: 10 输出例子: 7 --> 示例1 输入 ...
- 鼠标适配器Adapter
先来看看概念: 现在我们要写一个这样的东西,就是一个窗口,然后鼠标点一下就有一个小圆点,like this: 来我们来看代码: import java.awt.*; import java.util. ...