前段报表Highcharts

最新推荐文章于 2021-06-16 17:06:02 发布
最新推荐文章于 2021-06-16 17:06:02 发布
阅读量150 收藏
点赞数
分类专栏： java 文章标签： 前端报表 highcharts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caiyibing1992/article/details/82708498
版权

资料下载： http://www.highcharts.com/download
下载文件：这里写图片描述
解压后打开：
这里写图片描述
我们将js下的所有文件复制到我们的项目中就可以使用了，比如我放在highcharts文件夹下
1.引入highcharts文件：

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
        <!--highcharts核心文件-->
        <script type="text/javascript" src="../js/highcharts/highcharts.js"></script>
        <!--打印功能-->
        <script type="text/javascript" src="../js/highcharts/modules/exporting.js"></script>

2.打开解压文件中的index.htm文件，在浏览器中打开后我们可以看到各种类型图表，我们只需查看源代码复制过来使用就行了
3.以柱状图为例：
第一步,找到柱状图的demo:
这里写图片描述
这里我选择的是Colume with drilldown点开后：
这里写图片描述
接下来右击鼠标查看源代码，整段复制到我们的html中，然后修改我们需要的字段就行了：
源代码：


<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script src="../../js/jquery-1.8.3.min.js"></script>
        <style type="text/css">
${demo.css}
        </style>
        <script type="text/javascript">
$(function () {

    Highcharts.data({
        csv: document.getElementById('tsv').innerHTML,
        itemDelimiter: '\t',
        parsed: function (columns) {

            var brands = {},
                brandsData = [],
                versions = {},
                drilldownSeries = [];

            // Parse percentage strings
            columns[1] = $.map(columns[1], function (value) {
                if (value.indexOf('%') === value.length - 1) {
                    value = parseFloat(value);
                }
                return value;
            });

            $.each(columns[0], function (i, name) {
                var brand,
                    version;

                if (i > 0) {

                    // Remove special edition notes
                    name = name.split(' -')[0];

                    // Split into brand and version
                    version = name.match(/([0-9]+[\.0-9x]*)/);
                    if (version) {
                        version = version[0];
                    }
                    brand = name.replace(version, '');

                    // Create the main data
                    if (!brands[brand]) {
                        brands[brand] = columns[1][i];
                    } else {
                        brands[brand] += columns[1][i];
                    }

                    // Create the version data
                    if (version !== null) {
                        if (!versions[brand]) {
                            versions[brand] = [];
                        }
                        versions[brand].push(['v' + version, columns[1][i]]);
                    }
                }

            });

            $.each(brands, function (name, y) {
                brandsData.push({
                    name: name,
                    y: y,
                    drilldown: versions[name] ? name : null
                });
            });
            $.each(versions, function (key, value) {
                drilldownSeries.push({
                    name: key,
                    id: key,
                    data: value
                });
            });

            // Create the chart
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Browser market shares. November, 2013'
                },
                subtitle: {
                    text: 'Click the columns to view versions. Source: netmarketshare.com.'
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        text: 'Total percent market share'
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y:.1f}%'
                        }
                    }
                },

                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                },

                series: [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: brandsData
                }],
                drilldown: {
                    series: drilldownSeries
                }
            });
        }
    });
});


        </script>
    </head>
    <body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/data.js"></script>
<script src="../../js/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">Browser Version  Total Market Share
Microsoft Internet Explorer 8.0 26.61%
Microsoft Internet Explorer 9.0 16.96%
Chrome 18.0 8.01%
Chrome 19.0 7.73%
Firefox 12  6.72%
Microsoft Internet Explorer 6.0 6.40%
Firefox 11  4.72%
Microsoft Internet Explorer 7.0 3.55%
Safari 5.1  3.53%
Firefox 13  2.16%
Firefox 3.6 1.87%
Opera 11.x  1.30%
Chrome 17.0 1.13%
Firefox 10  0.90%
Safari 5.0  0.85%
Firefox 9.0 0.65%
Firefox 8.0 0.55%
Firefox 4.0 0.50%
Chrome 16.0 0.45%
Firefox 3.0 0.36%
Firefox 3.5 0.36%
Firefox 6.0 0.32%
Firefox 5.0 0.31%
Firefox 7.0 0.29%
Proprietary or Undetectable 0.29%
Chrome 18.0 - Maxthon Edition   0.26%
Chrome 14.0 0.25%
Chrome 20.0 0.24%
Chrome 15.0 0.18%
Chrome 12.0 0.16%
Opera 12.x  0.15%
Safari 4.0  0.14%
Chrome 13.0 0.13%
Safari 4.1  0.12%
Chrome 11.0 0.10%
Firefox 14  0.10%
Firefox 2.0 0.09%
Chrome 10.0 0.09%
Opera 10.x  0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition  0.09%</pre>

    </body>
</html>

修改后代码：


<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>柱状图</title>
        <script src="../js/jquery-1.8.3.js"></script>
        <style type="text/css">
        </style>
        <script type="text/javascript">
$(function () {

    Highcharts.data({
        csv: document.getElementById('tsv').innerHTML,
        itemDelimiter: '\t',
        parsed: function (columns) {

            var brands = {},
                brandsData = [],
                versions = {},
                drilldownSeries = [];

            // Parse percentage strings
            columns[1] = $.map(columns[1], function (value) {
                if (value.indexOf('%') === value.length - 1) {
                    value = parseFloat(value);
                }
                return value;
            });

            $.each(columns[0], function (i, name) {
                var brand,
                    version;

                if (i > 0) {

                    // Remove special edition notes
                    name = name.split(' -')[0];

                    // Split into brand and version
                    version = name.match(/([0-9]+[\.0-9x]*)/);
                    if (version) {
                        version = version[0];
                    }
                    brand = name.replace(version, '');

                    // Create the main data
                    if (!brands[brand]) {
                        brands[brand] = columns[1][i];
                    } else {
                        brands[brand] += columns[1][i];
                    }

                    // Create the version data
                    if (version !== null) {
                        if (!versions[brand]) {
                            versions[brand] = [];
                        }
                        versions[brand].push(['v' + version, columns[1][i]]);
                    }
                }

            });

            $.each(brands, function (name, y) {
                brandsData.push({
                    name: name,
                    y: y,
                    drilldown: versions[name] ? name : null
                });
            });
            $.each(versions, function (key, value) {
                drilldownSeries.push({
                    name: key,
                    id: key,
                    data: value
                });
            });

            // Create the chart
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: '浏览器市场占额，2018'
                },
                subtitle: {
                    text: '来自维基百科大数据科普'
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        text: '总占百分比'
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y:.1f}%'
                        }
                    }
                },

                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                },

                series: [{
                    name: '品牌',
                    colorByPoint: true,
                    data: brandsData
                }],
                drilldown: {
                    series: drilldownSeries
                }
            });
        }
    });
});


        </script>
    </head>
    <body>
<script src="../js/highcharts/highcharts.js"></script>
<script src="../js/highcharts/modules/data.js"></script>
<script src="../js/highcharts/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">Browser Version  Total Market Share
微软 8.0  26.61%
微软 9.0  16.96%
谷歌 18.0 8.01%
谷歌 19.0 7.73%
火狐 12   6.72%
微软 6.0  6.40%
火狐 11   4.72%
微软 7.0  3.55%
苹果Safari 5.1    3.53%
火狐 13   2.16%
火狐 3.6  1.87%
挪威Opera 11.x    1.30%
谷歌 17.0 1.13%
火狐 10   0.90%
苹果Safari 5.0    0.85%
火狐 9.0  0.65%
火狐 8.0  0.55%
火狐 4.0  0.50%
谷歌 16.0 0.45%
火狐 3.0  0.36%
火狐 3.5  0.36%
火狐 6.0  0.32%
火狐 5.0  0.31%
火狐 7.0  0.29%
专有的或不可检测的   0.29%
谷歌 18.0 - Maxthon Edition   0.26%
谷歌 14.0 0.25%
谷歌 20.0 0.24%
谷歌 15.0 0.18%
谷歌 12.0 0.16%
挪威Opera 12.x    0.15%
苹果Safari 4.0    0.14%
谷歌 13.0 0.13%
苹果Safari 4.1    0.12%
谷歌 11.0 0.10%
火狐 14   0.10%
火狐 2.0  0.09%
谷歌 10.0 0.09%
挪威Opera 10.x    0.09%
微软 8.0 - Tencent Traveler Edition   0.09%</pre>

    </body>
</html>

效果图：
这里写图片描述
ps:
title ： 报表标题
subtitle: 子标题
xAxis ： 横坐标
yAxis： 纵坐标
series： 报表数据

sinei克
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
报表 HighCharts
04-18
完整报表使用教程
前端报表
luo_rp的博客
07-20 1892
1、Highcharts-4.0.4压缩包解压； 2、点击“index.html”文件，里面有个折线、柱状、圆饼、地图等报表样式； 3、选取需要的报表验收，查看源代码，将其复制到工程代码中，然后，导入相应的js(Highcharts-4.0.4中已包含)； 4、然后，将其中的内容相关属性进行更改调整即可； 5、如果是需要导出报表，需要添加一个插件exporting.js，然后需要在high...
前端框架Vue和前端报表的故事
qq_21779101的博客
06-16 1760
Vue篇 Vue作为前端开发框架三剑客之一，我自己对Vue产生兴趣最大的原因，一是工作的需要，需要了解前端框架，二是Vue框架的创始人尤雨溪是一个中国人，这让我对Vue有了强大的兴趣。了解完尤雨溪本人，再看在前端领域Vue的影响力和受众群体，只能说大神请收下我的膝盖。除此之外Vue的资料文档汉化做的非常好，非常容易上手。Vue自 2014 年发布以来，成为很多开发者必备的工具。特别是Vue3.0于 2020 年 9 月正式发布后。新版本更小、更快、API更丰富，圈粉无数。 从18年开始vue在前端的主流
二十三、【开源】EFW框架Web前端开发之常用组件（FusionCharts图表、ReportAll报表等）
09-25 527
回《【开源】EFW框架系列文章索引》        EFW框架源代码下载V1.2：http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载：http://pan.baidu.com/s/1o6MAKCa          前言：上一章讲了EFW框架中的界面框架JqueryEasyUI，在一个Web系统开发中除了需要一个好的界面框架还有需要一些
前端系列之HTML（表格）
热门推荐
十二指环的博客
01-18 5万+
了解表格应用场景表格基本结构如何操作表格？添加、删除行与列表格属性<caption></caption>定义表格的标题表格跨行跨列表格嵌套案例：表格网页布局<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格布局</title> </head> <body> <table width="100
java后台的mysql执行语句
坎七饼的博客
05-09 2376
Java后台数据库执行语句的写法：    @Override     public void update(NotifyInfo notifyInfo) {         String hqldelete = "update NotifyInfo e set e.content=:content,e.creatDate=:time where e.nid=:nid";     
js 报表 Highcharts
07-12
这是一个简单 使用 好看的报表工具 使用方法：直接打开 index.htm 即可看到我们提供的离线例子清单；所有需要的 js 文件在 /js/ 目录里。 由 Highcharts中文官网发布
报表工具Highcharts
07-17
需要引入highcharts库文件，由于highcharts是构建在jQuery、MooTools、Prototype等等第三方Javascript库之上，因此，不同的系统可以根据本身的代码结构来选用一种第三方库，这个demo采用的是jQuery；项目是web项目，...
Highcharts水晶报表
04-11
js jquery Highcharts-3.0.0水晶报表 跨平台
Highcharts实现图形报表
05-05
使用Highcharts实现的图形报表，各种柱形对比图，柱形级别图，单一柱形图，各种功能。
前端JS生成报表，以及报表读取
机智如我
03-27 2170
前端JS生成报表，以及报表读取前言正文读取下载 前言 在做web的时候，经常会有一些报表功能，一般方式都是在后台生成文件，通过流传给前台，生成下载链接。 这种方式会占用一定的后台资源，而且，下载操作是双向的，必须等待用户下载之后操作才能完成。当然这个也是可以解决的，只要生成文件流，保存在前端就可以了。但是今天说的是另外一种方式，交互在前端完成，后台只负责提供数据。（转载请注明出处） 正文 这是该j...
Echarts统计报表前端框架
一个人的博客
08-30 1万+
前端数据展示Echarts http://echarts.baidu.com/index.html http://ecomfe.github.io/echarts/doc/slide/whyEcharts.html#/ admin后台样式 http://www.zi-han.net/theme/se7en/
常用的web前端框架 --- 图形报表
任何技能都是从模仿开始，逐步升华。
01-22 2万+
1 highcharts     http://www.highcharts.com/ Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
highcharts（前端报表生成）
happy_meng
01-07 3334
highcharts（前端报表生成） 前端报表技术：使用 JavaScript 生成漂亮图表 百度 echarts： http://echarts.baidu.com/examples.html Funsioncharts : http://www.fusioncharts.com/goodies/fusioncharts-free/ Highcharts ： 折线图、 区域图、 柱状图、
spring框架有哪些优点
caiyibing1992的博客
09-20 1万+
1.控制反转将对象的创建交给了spring,简化了开发，降低了代码之间的耦合性和侵入性。 2.方便对程序进行声明式事物管理，我们只需通过配置就可以完成对事物管理。 3.方便集成各种优秀的框架，spring不排斥各种优秀框架，其内部提供了对各种优秀框架如(struts2，hibernate,mybatis,quartz，jpa)等的直接支。 4.方便对程序进行测试，spring对于Junit4的支持...
for input string 异常
caiyibing1992的博客
09-03 1万+
　　“for input string:”错误的详细错误信息为“java.lang.NumberFormatException: For input string:”异常； 　　 　　该异常的是由于把不符合数字格式的字符串转换为数字时抛出的格式化异常； 　　检查是否在使用Interger.parseInt(str),str是否符合规范...
HTML中th标签的作用(t1)
caiyibing1992的博客
08-28 4472
哎，最近学的很烦，都不想敲代码了，准备写点小知识点，作为一个系列吧，括号内带t就是代表这个系列啦，会更新到我敲不动代码那天，先看代码，学习AngularJs中的小demo： &lt;body&gt; &lt;div ng-app="myapp" ng-controller="myctrl"&gt; &lt;table width="90%" bor...
仿百度搜索显示下拉框（一）
caiyibing1992的博客
08-13 3346
# 最近在写一个旅游网站的小案例，其中的一个功能：搜索同时显示下拉框 本文所用的知识主要有：JQuery语法，ajax异步加载，ssh框架； 1:逻辑分析： 事件分析：在输入框中输入值后，下拉框即显示，根据异步加载得到的信息，将数据显示在下拉框中，此事件为获得焦点元素事件(此事件我也有点模糊)keyup事件； 后台技术分析：获得到文本框的输入值name后，我们通过ajax技术，异步去数据库...
highcharts
最新发布
03-02
对于您提出的问题，我可以回答：Highcharts是一个基于JavaScript的矢量图表库，它可以为网络应用程序和企业应用程序提供交互式图表。它支持大量的图表类型，包括折线图、柱状图、饼图、散点图、旭日图、烛台图和极...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值