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官网里有很多示例图，可根据实际需求而用之。请猛戳：更多示例图。

　　选中图后，只需按照上述步骤即可，祝君使用愉快！

转载于:https://www.cnblogs.com/Michael--chen/p/7295215.html

HighCharts基本使用相关推荐

html使用highcharts绘制饼图,html js highcharts绘制圆饼图表
jquery实现饼状图效果 - 站长素材 var chart; $(function () { var totalMoney=999 var zccw=178 var sycw=821 $(docum ...
statpot:使用mongo+bootstrap+highcharts做统计报表
最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求就需要分析这些数据,然后做出个统计报表. 需求实现最初的时候想着每天把这些接口访问 ...
js图表控件：highcharts的应用(二)
柱状图前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zhux ...
HighCharts使用心得
前言: 之前非常早的一个项目中使用过highcharts.感觉挺方便的,图表类型也比較丰富.并且还支持数据的下钻,可是假设投入商业使用的话还会有一些版权的问题,所以后来就使用了EChart.这是百度开 ...
ASP.NET MVC+HighCharts开发统计图表
HighCharts是开源的Web图表js组件,与D3.js一样,经常用于数据可视化.HighCharts图表类型丰富,功能非常强大,是很好的数据可视化解决方案,其官方网站为:http://www.h ...
php后台数据显示到前端,php,前端_怎么在javascript中得到后台数据?，php,前端,javascript,highcharts - phpStudy...
怎么在javascript中得到后台数据? 最近在研究在网页中嵌入hightchart的表格在嵌入时发现需要在javascript中得到后台的一组数据代码如下 require_once('incl ...
highcharts与ajax的应用
整理一份完整的例子,以供参考: <1>页面chart.html: <span style="font-size:14px;"><!DOCTYPE HT ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
转： HighCharts 详细使用及API文档说明
一.HighCharts开发说明: HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下 ...

HighCharts基本使用

HighCharts基本使用相关推荐

最新文章

热门文章