一、简叙

　　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. 在IntelliJ IDEA 中配置Ueditor富文本插件

    这是我自学的配置教程,刚刚学习不太完善请谅解! 我会根据我的学习进程对此进行更贴,欢迎关注哦 ! 第一步:下载插件,地址:http://ueditor.baidu.com/website/downlo ...

  2. mysql 案例 ~ 表空间迁移数据与数据导入

    一  简介:mysql5.6+的表空间传输二 目的:复制数据到另一个表三 步骤   1 create table b like a ->创建一个空表   2 alter table b disc ...

  3. Git更新远程仓库代码到本地（转）

    参考链接:https://blog.csdn.net/chailyuan/article/details/53292031 在下载一个较大的github项目以后,当该项目代码更新以后,我们想将更新的内 ...

  4. python初级实战-----主机在线情况监控web

    背景 公司有600多台服务器,打算写一个小程序,能一眼看见哪些服务器不在线. 大体思路是: 1.把所有服务器ip存进数据库,ping命令判断服务器是否在线 2.更新数据库中ip的状态 3.简单的web ...

  5. mybatis中useGeneratedKeys和keyProperty的作用

    在使用mybatis时,常常会出现这种需求: 当主键是自增的情况下,添加一条记录的同时,其主键是不能使用的,但是有时我们需要该主键,这时我们该如何处理呢?这时我们只需要在其对应xml中加入以下属性即可 ...

  6. ORACLE数据库，数据量大，转移数据到备份表语句

    INSERT INTO TEMP_BUS_TRAVEL_INFO ( SELECT * FROM BUS_TRAVEL_INFO t ') SELECT COUNT(*) FROM TEMP_BUS_ ...

  7. 建立Oracle GoldenGate凭证

    了解如何为与数据库交互的流程创建数据库用户,分配正确的权限并防止未经授权使用凭据. 主题: 为Oracle GoldenGate分配凭证 保护Oracle GoldenGate凭证 3.1 为Orac ...

  8. python 导入numpy 导致多进程绑定同一个CPU问题解决方法

    python 如果有导入numpy模块的import语句,会导致默认将多进程程序的每个进程都绑定到同一个CPU core上, 失去了多进程在多核CPU上的性能优越性,这和CPU affinity(CP ...

  9. [转] Torch中实现mini-batch RNN

    工作中需要把一个SGD的LSTM改造成mini-batch的LSTM, 两篇比较有用的博文,转载mark https://zhuanlan.zhihu.com/p/34418001 http://ww ...

  10. CF1091E New Year and the Acquaintance Estimation

    题目地址:CF1091E New Year and the Acquaintance Estimation 首先,易知 \(ans\) 的奇偶性与所有给出的数的和的奇偶性相同 其次,易证 \(ans\ ...