`
syuanq
  • 浏览: 3674 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

highcharts实例教程一:结合php与mysql生成折线图

阅读更多

Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图、折线图、面积图、柱状图、饼图、散点图 等多达28种不同类型的图表,还支持3D立体图表的生成,可以满足你对Web图表的任何需求 !而且Highcharts对学习者、非商业机构是免费使用的。

案例场景:要求针对技术cto网站,直观地显示一周网站pv、uv的变化曲线;
编程实现:
1、首先创建数据库,保存网站每天的数据;
CREATE TABLE `line` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `pv` int(10) DEFAULT NULL,
  `uv` int(10) DEFAULT NULL,
  `did` int(10) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

2、编写php代码从数据库中获取到每天网站的数据;
include_once('connect.php');
$res = mysql_query("select * from line");
while($row = mysql_fetch_array($res)){
    $pv[] = intval($row['pv']);  //注意这里必须要用intval强制转换,不然图表不能显示
    $uv[] = intval($row['uv']);
}
$data = array(array("name"=>"pv","data"=>$pv),array("name"=>"uv","data"=>$uv));
$data = json_encode($data);    //把获取的数据对象转换成json格式

 

效果预览:


 

本文出自技术CTO:http://www.jscto.net,转载请注明出处。
 

  • 大小: 28.1 KB
分享到:
评论

相关推荐

    highcharts实现从mysql数据库获取数据生成折线图

    本篇将详细介绍如何利用Highcharts结合MySQL数据库,实现在Web应用中动态生成折线图。 首先,我们需要了解Highcharts的基本使用。Highcharts是一个轻量级的图表库,它提供了丰富的API和配置选项,可以自定义图表...

    使用Highcharts结合PHP与Mysql生成饼状图

    使用Highcharts结合PHP与Mysql生成饼状图 为了更好的讲解,实例中在Mysql数据库中建立一张表chart_pie,用于表示各搜索引擎带来的访问量,表中分别有id、title和pv三个字段,id是自增长整型、主键;title表示搜素...

    Highcharts结合PHP与Mysql生成饼状图chart_pie修改版

    在这个“Highcharts结合PHP与Mysql生成饼状图chart_pie修改版”项目中,我们将探讨如何将Highcharts与PHP和MySQL数据库结合起来,实现数据的动态可视化。 首先,让我们了解核心知识点: 1. **Highcharts**:...

    Highcharts+PHP+Mysql生成饼状统计图

    本主题将探讨如何利用Highcharts库结合PHP和MySQL数据库来生成饼状统计图,帮助我们更好地理解和展示数据。 【Highcharts】: Highcharts是一个基于JavaScript的开源图表库,它提供了丰富的图表类型,如柱状图、...

    asp生成折线图源码

    - ASP编程网:从提供的链接`ASP编程网----中国最好的ASP专业编程网站.url`中,你可以找到更多关于ASP编程的教程和资源,其中包括可能的ASP生成折线图的实例和指南。 - 使用说明.txt:这个文件可能是提供具体的生成...

    highcharts快速生成百万数据点折线图.rar

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,包括折线图、柱状图、饼图等多种类型。在处理大数据量时,Highcharts提供了高效的优化策略,使得即使...

    highcharts实例+教程

    这个"highcharts实例+教程"的压缩包包含了学习和使用Highcharts所需的重要资源。 首先,中文API帮助文档是理解和应用Highcharts的关键。API文档详细解释了Highcharts的各种配置选项、方法和事件,包括图表的基本...

    Java和Highcharts实现折线图

    总之,Java和Highcharts的结合提供了一种强大而灵活的方式,用于在Web应用中展示动态的折线图。通过Java处理数据和构建后端接口,以及Highcharts在前端渲染图表,我们可以创建出交互性强、用户体验良好的数据可视化...

    Highcharts 折线统计图

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的统计图表,包括折线图、柱状图、饼图、散点图等。在这个“Highcharts 折线统计图”的主题中,我们将深入探讨...

    折线图demo highCharts

    总结来说,HighCharts作为一款强大的JavaScript图表库,为开发者提供了一种高效且灵活的方式来创建折线图和其他类型的图表,特别是在Web应用中,它能避免像JFreeChart与Struts2结合时可能出现的复杂配置问题。...

    网页图表Highcharts实践教程基础篇

    Highcharts是一款强大的JavaScript库,专为Web开发者设计,用于生成高质量的数据可视化图表。它支持多种图表类型,包括折线图、柱状图、饼图、散点图、热力图等,能够帮助用户直观地理解复杂数据。 一、Highcharts...

    Highcharts画折线图

    Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种互动图表,包括折线图、柱状图、饼图等。这个"Highcharts画折线图"的主题涉及到使用Highcharts来绘制动态、交互式的折线图,这对于数据可视化和...

    ASP.NET 折线图

    ASP.NET 折线图是一种常用的数据可视化方法,用于展示数据随时间变化的趋势。在Web开发中,使用ASP.NET结合JavaScript库可以轻松实现这种效果。3D折线图为用户提供了更丰富的视觉体验,增强了数据的立体感和深度,...

    HighCharts多折线图实际应用【js+java】

    HighCharts的2017年使用的实例,此番为折线图,一个图里包含多条折线,业务需求:展示多个支付方式,在某段时间内,刷卡金额的趋势折线图。我用的方法比较笨,将支付方式一个一个列出来了,还有优化的空间,不过完全...

    asp读取数据库中数据生成统计折线图

    在ASP(Active Server Pages)开发中,生成统计折线图是一项常见的需求,它可以帮助我们以图形化的方式展示从数据库中获取的数据,使分析和理解变得更加直观。本文将深入探讨如何利用ASP来读取数据库中的数据并生成...

    java实现Echarts折线图历史数据显示(一)

    ECharts是一款由百度开源的、基于JavaScript的数据可视化库,能够生成丰富的图表类型,包括折线图。而Java作为后端语言,通过JDBC(Java Database Connectivity)接口可以方便地与MySQL数据库进行交互。 首先,让...

    highcharts动态开发实例

    本实例是关于如何结合PHP和MySQL数据库,利用Highcharts进行动态数据展示的一个教程。 首先,我们要理解Highcharts的基本结构。Highcharts的核心是一个JavaScript库,它包含了一系列用于绘制图表的API函数。通过在...

    highcharts:组合图,生成可以点击的横坐标

    组合图是指在一个图表中同时展示多种类型的图表,如折线图、柱状图、饼图等,以直观地对比不同数据系列的表现。这在数据分析和数据展示时非常有用,可以帮助用户快速理解多维度的数据信息。 要创建一个组合图,我们...

    android_highcharts 折线图

    在Android开发中,Highcharts是一个常用的JavaScript图表库,它提供了丰富的图表类型,如折线图、柱状图、饼图等。本节我们将详细探讨如何在Android应用中调用Highcharts.js来实现折线图的展示。 首先,理解...

    jq报表折线图

    "jq报表折线图"这个功能模块显然聚焦于利用jQuery(jq)库来实现动态和交互式的报表,特别是折线图这一图表类型。以下是关于这个主题的详细解释: **jQuery(jq)库** jQuery是一个轻量级的JavaScript库,它简化了...

Global site tag (gtag.js) - Google Analytics