图表工具：Highcharts 使用( 上 )

最新推荐文章于 2020-01-03 20:00:05 发布

desYang

最新推荐文章于 2020-01-03 20:00:05 发布

阅读量806

点赞数 1

本文链接：https://blog.csdn.net/ygyblue2/article/details/80235200

版权

最近在项目中接触了一个图表工具，个人感觉非常好用呀！

由于暂时这个公司的组织架构，并非是前后端完全分离的，所以也需要我参与前台逻辑。对于前后端分离的这个事呢，我个人觉得有好有坏，比如我此前的东家是前后端完全分离的，那时几乎不写js，都是后台技术和逻辑。而现在的公司（不说名字了，互联网媒体，三个字，做新闻资讯，香港公司）在后台开发的同时需要我在web前台逻辑上也参与（h5）除外，记得刚入职的时候就写了一段时间的Js，当时还是有些不适应的。

对于前后分离个人观点

好处就是工作很专注，后端开发应用的技术已经非常多了，何况业务逻辑大多复杂，庞大专业的项目必须要这样。

而相比于做web和后端的开发者，从初创项目的角度来讲他们能为项目付出的会更多，当项目发展到一定水平时需要考虑技术精湛且专业的前端工程师和后端工程师来分工，协调来把项目发展成更专业的产品。

关于Java可以使用到的图表工具，可能大家就比较熟悉了，百度的echarts，JFreeChart等展示统计数据的图表工具，后端排查堆溢出的MAT，JProfiler。这里说的是Highcharts，前台展示图表工具。

介绍一下Highcharts，它由Javascript编写，免费，用来给web应用添加图表功能

例如在项目中我们很多情况下要展示数据，日活数据，流量数据，日志数据，营业数据等，并需要多种图表从多种形式来直观的展示。

Highcharts具有以下的特点：

1.开源免费

2.配置简单

3.配置简单

4.可在图表生成后修改

5.支持多维图表展示

6.有鼠标悬浮提示

7.毫秒级时间精确

8.网页输出图表

9.支持导出 PDF/ PNG/ JPG / SVG 格式

10.支持图表变焦

11.从服务器载入数据展示

12.支持标签旋转等

总体来说这是个实用的，可以满足常规需求的图表工具

一、Highcharts 环境配置：

需要准备

1.下载jQuery包

jquery.min.js

2.安装Highcharts，推荐使用下载的方式

<head>
   <script src="/highcharts/highcharts.js"></script>
</head>
   <script src="/highcharts/highcharts.js"></script>
</head>

二、生成图表的配置

1.创建模板

<html>
<head>
<title>Highcharts page</title>
    <script src="/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="/js/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
     
});
</script>
</body>
</html>
<head>
<title>Highcharts page</title>
    <script src="/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="/js/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
     
});
</script>
</body>
</html>

2.在function中配置

主标题：

var title = {
      text: '2011-2017房贷利率表'   
   };

副标题：

var subtitle = {
      text: 'Source: ygyblue2'
   };

desYang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图表工具：Highcharts 使用( 上 )

最近在项目中接触了一个图表工具，个人感觉非常好用呀！由于暂时这个公司的组织架构，并非是前后端完全分离的，所以也需要我参与前台逻辑。对于前后端分离的这个事呢，我个人觉得有好有坏，比如我此前的东家是前后端完全分离的，那时几乎不写js，都是后台技术和逻辑。而现在的公司（不说名字了，互联网媒体，三个字，做新闻资讯，香港公司）在后台开发的同时需要我在web前台逻辑上也参与（h5）除外，记得刚入职的时候就...
复制链接

扫一扫