HighCharts基本使用
一、简叙
HighCharts是一个非常强大的画图插件，在以后的工作汇报，数字展示，它将是一把利器。既然是插件，那么就有它的使用规则，我们只需要遵循它的使用规则，就可以画出我们想要的展示效果了。期待吗？好了， 下面我们就来看看它是怎么玩的。
详情请进官网：https://www.hcharts.cn
二、基本使用方法
1、配置URL
urlpatterns = [
...
url(r'^chart.html$',views.Chart.as_view()),
]
配置URL
2、编写视图函数 view
class Chart(View):
def get(self,request):
return render(request,'chart.html')
CBV code
3、编写HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="i1"></div>
<script src="/static/js/jquery-3.2.1.js"></script>
<script src="/static/plugins/Highcharts-5.0.10/code/highcharts.js"></script>
<script src="/static/js/chart.js"></script> //引入HighCharts配置文件。
</body>
</html>
HTML页面
4、编写HighCharts配置js文件
<script>
Highcharts.setOptions({
global: {
useUTC: false //不使用世界标准时间
}
});
var chart = new Highcharts.Chart('i1', {
title: {//大标题
text: '不同城市的月平均气温',
x: -20
},
subtitle: {//子标题
text: '数据来源: WorldClimate.com',
x: -20
},
xAxis: {//X轴显示信息
categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
yAxis: {//Y轴显示信息
title: {
text: '温度 (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
// 图中显示的数据
series: [{
name: '纽约',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: '伦敦',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
</script>
配置文件
5、看看效果图吧！
ps：HighCharts官网里有很多示例图，可根据实际需求而用之。请猛戳：更多示例图。
选中图后，只需按照上述步骤即可，祝君使用愉快！
HighCharts基本使用的更多相关文章
- Highcharts中国地图热力图
最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...
- Highcharts入门小示例
一.创建条形图 1.创建div容器 <div id="container" style="min-width:800px;height:400px"> ...
- Highcharts配置
一.基础使用 <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> ...
- highcharts .net导出服务 和 两种导出方式
highcharts 的Net导出服务 GitHub上整理的https://github.com/imclem/Highcharts-export-module-asp.net 引用两个程序集 sh ...
- 《Learning Highcharts》中文翻译
在highcarts的官方网站上推荐了一本书,由于highchart在平时工作中会用到,所以我们尝试将其翻译成中文,仅作为学习highchart工具的一种方式,以方便日后查阅. 翻译图书作为学习笔记, ...
- highcharts饼状图使用案例
在公司由于需要对订单数据进行分析,故使用到了highcharts工具 <block name="Js"> <script type="text/java ...
- highcharts
preparation Highcharts Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用 ...
- highcharts使用笔记
1.legend取消点击事件: 饼图:plotOptions.pie.point.events.legendItemClick = function() {return false;} 其他,如:pl ...
- FusionCharts和highcharts 饼图区别!
FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...
- .net 下新版highcharts本地导出图片bug处理
最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...
随机推荐
- python发送网络请求
1.使用urllib模块(使用不方便,建议使用第二种) get请求: res = urlopen(url) from urllib.request import urlopen url = 'http ...
- Eclipse 自动生成 Ant的Build.xml 配置文件
Eclipse 自动生成 Ant的Build.xml 配置文件,生成的方法很隐蔽 选择你要生成Build.xml文件的项目,右键. Export-> General -> Ant Buil ...
- BigDecimal实现末尾去掉无用0
BigDecimal 原生提供了 stripTrailingZeros 方法可以实现去掉末尾的 0,然后使用 toPlainString 可以输出数值,注意这里如果使用 toString() 会变成 ...
- mongodb系列~ mongodb慢语句(1)
1 简介:讲讲mongo的慢日志2 慢日志类型 query insert update delete 3 查看慢日志 1 db.system.profile.find() 慢日志总揽 2 d ...
- ReentrantLock(重入锁)的使用
//效果和synchronized一样,都可以同步执行,lock方法获得锁,unlock方法释放锁public class MyService { private Lock lock = new Re ...
- Django中的缓存基础知识
由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache中,5 ...
- android图片绘制
1.基本圆角.边框 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=& ...
- 论文笔记：Joint Embeddings of Shapes and Images via CNN Image Purification
今天分享的这篇论文是 SIGGRAPH 2015 的入选论文,标题比较长,但它做的事情其实很简单:通过一张图片,找到和这张图片最相似的 3D 形状
- React组件State提升(译）
译自:https://reactjs.org/docs/lifting-state-up.html (适当进行了裁减) 通常我们会碰到这样的情况,当某个组件的state数据改变时,几个React组件同 ...
- Liunx之KVM搭建图形化的WEB
作者:邓聪聪 我们常在Windowns下使用VMware,当然在Liunx中也有这样的软件供我们使用.生产环境的KVM宿主机越来越多,需要对宿主机的状态进行调控.这里用webvirtmgr进行管理.图 ...