一、简叙

  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基本使用的更多相关文章

  1. Highcharts中国地图热力图

    最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...

  2. Highcharts入门小示例

    一.创建条形图 1.创建div容器 <div id="container" style="min-width:800px;height:400px"> ...

  3. Highcharts配置

    一.基础使用 <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> ...

  4. highcharts .net导出服务 和 两种导出方式

    highcharts 的Net导出服务  GitHub上整理的https://github.com/imclem/Highcharts-export-module-asp.net 引用两个程序集 sh ...

  5. 《Learning Highcharts》中文翻译

    在highcarts的官方网站上推荐了一本书,由于highchart在平时工作中会用到,所以我们尝试将其翻译成中文,仅作为学习highchart工具的一种方式,以方便日后查阅. 翻译图书作为学习笔记, ...

  6. highcharts饼状图使用案例

    在公司由于需要对订单数据进行分析,故使用到了highcharts工具 <block name="Js"> <script type="text/java ...

  7. highcharts

    preparation Highcharts Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用 ...

  8. highcharts使用笔记

    1.legend取消点击事件: 饼图:plotOptions.pie.point.events.legendItemClick = function() {return false;} 其他,如:pl ...

  9. FusionCharts和highcharts 饼图区别!

    FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...

  10. .net 下新版highcharts本地导出图片bug处理

    最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...

随机推荐

  1. Eclipse安装lombok及常用注解

    转自:https://blog.csdn.net/ZJDWHD/article/details/77795023 lombok的官方网址:http://projectlombok.org/ https ...

  2. 基于【字符】操作的IO接口:Writer、Reader

    Reader public class BufferedReaderTest { public static void main(String[] args) throws IOException { ...

  3. ASP.NET MVC 入门

    ASP.NET MVC 入门 (Learning ASP.NET MVC) 传统的WebForm发展到如今出现不少的缺陷, 比如为了解决Http的无状态WebForm模式使用了ViewsState来保 ...

  4. nodejs -Promise

    创建一个 readFile.js,读取三个文件abc的内容并输出到控制台 var fs = require('fs') fs.readFile('./a.txt','utf-8',function ( ...

  5. 网络爬虫构造出URL的列表数据

    urls = ['http://bj.xiaozhu.com/search-duanzufang-p{}-0/'.format(number) for number in range(1,14)] # ...

  6. HDOJ 1698 Just a Hook (线段树)

    题目: Problem Description In the game of DotA, Pudge’s meat hook is actually the most horrible thing f ...

  7. GCC 编译优化指南【转】

    转自:http://www.jinbuguo.com/linux/optimize_guide.html 版权声明 本文作者是一位开源理念的坚定支持者,所以本文虽然不是软件,但是遵照开源的精神发布. ...

  8. PEP 530 -- 异步推导式

    PEP 530 -- 异步推导式 摘要 PEP 492和PEP 525使用async/await语法引入了协程.PEP 530建议添加list,set,dict推导式和生成器推导式的异步版本. 理论和 ...

  9. Matlab调用C程序

    Matlab调用C程序   复制来自https://blog.csdn.net/u010839382/article/details/42463237 Matlab是矩阵语言,如果运算可以用矩阵实现, ...

  10. Liunx之xl2TP的一键搭建

    作者:邓聪聪 1 L2TP(Layer 2 Tunnel Protocol二层隧道协议l),上图说明了VPN的一些特点,出差员工或者外出员工通过拨特定号码的方式接入到企业内部网络; --------- ...