读取数据库数据并在HighCharts上显示

可以看得出,图表里横纵坐标的数据都是静态的几个数据,因此我们只要从数据库读取出我们想要的横纵坐标值,然后动态赋给Chart就行了。

X轴:

xAxis: {                     categories: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘ ], //X轴的坐标值                     title: {text: ‘周数‘},  //X轴坐标标题                 }

Y轴:

yAxis: {                     title: {text: ‘人数(人)‘},  //Y轴坐标标题
                }

主标题:

title: { text: ‘图表主标题‘ }, //图表主标题

副标题:

subtitle: {text: ‘图表子标题‘ }, //图表副标题

Y轴数据:

series:[{ name: ‘人数‘, data: [20, 40, 30, 90, 100, 60, 50] }]

这些值我们都可以从数据库获得数据,然后动态绑定上去即可,这里后台代码中最常用的是StringBuilder,通过它来拼凑出要绑定的数据

X轴:

xAxis: {                     categories: <%= XAxisCategories %> , //X轴的坐标值                     title: <%=Xtitle %> ,  //X轴坐标标题                 }

Y轴:

yAxis: {                     title:<%=Ytitle %> ,  //Y轴坐标标题                 }

主标题:

title: <%=title %> , //图表主标题

副标题:

subtitle: <%=subtitle %> , //图表副标题

Y轴数据:

series:<%= seriesData.ToString() %>

下面给出获取X轴、Y轴、标题的方法:

public string XAxisCategories = ""; //X轴     public StringBuilder seriesData = new StringBuilder(); //Y轴     public string title = ""; // 图表标题

...

标题获取

title = "{text: ‘" + "<font color=red>"+site_name +"</font>"+"‘}";  //红色标记的部分是从数据库动态获取的,怎么获取,该获取什么,根据你需要,你应该懂的

X轴获取:

StringBuilder xAxisCategories = new StringBuilder();

xAxisCategories.Append("[");

...

foreach (DataRowView drv in ds.Tables[0].DefaultView)

{      xAxisCategories.Append("‘");      xAxisCategories.Append(drv["周数"] == null ? "0" : drv["周数"].ToString());      xAxisCategories.Append("‘,");

}

XAxisCategories = xAxisCategories.Replace(",", "", xAxisCategories.Length - 1, 1).Append("]").ToString(); //这里是去掉最后一个多余的逗号(,)

Y轴获取:

StringBuilder yAxisCategories = new StringBuilder();

...

foreach (DataRowView drv in ds.Tables[0].DefaultView)

{      yAxisCategories.Append(drv["人数"] == null ? "0" : drv["人数"].ToString());      yAxisCategories.Append(",");

}

seriesData.Append("[{name: ‘人数‘,type: ‘spline‘,data: ["); seriesData.Append(yAxisCategories.Replace(",", "", yAxisCategories.Length - 1, 1)); //去除最后一个逗号(,) seriesData.Append("]}]");

时间: 2024-09-28 19:33:07

读取数据库数据并在HighCharts上显示的相关文章

读取数据库数据,并将数据整合成3D饼图在jsp中显示

首先我将生成饼图的方法独立写成一个PieChar.java类,详细代码如下:(数据库需要自己建,如有需要的话) 1 import java.io.IOException; 2 import java.sql.SQLException; 3 import org.jfree.chart.ChartFactory; 4 import org.jfree.chart.JFreeChart; 5 import org.jfree.data.general.DefaultPieDataset; 6 7 p

Java读取数据库数据生成柱状图

此案例是用swing显示数据的.需要引入jfreechart相关包,不同版本可能包不相同,本人用的是 此案例在ssi框架下会报错,不用框架就没问题. Java后台逻辑代码: public class BarChart { ChartPanel frame1; public BarChart() { CategoryDataset dataset = getDataSet(); JFreeChart chart = ChartFactory.createBarChart3D("水果",

读取Excel文件内容在Web上显示

点击事件代码.cs protected void Button1_Click(object sender, EventArgs e) { string strPath = "d:/test.xls"; string mystring = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source = '" + strPath + "';Extended Properties='Excel 8.0;HDR=Yes;IMEX=

python读取数据库数据,读取出的中文乱码问题

最近遇到python读取数据库数据,读取出的中文乱码问题, 网络搜索的基本是: "1. Python文件设置编码 utf-8 (文件前面加上 #encoding=utf-8)2. MySQL数据库charset=utf-83. Python连接MySQL是加上参数 charset=utf84. 设置Python的默认编码为 utf-8 (sys.setdefaultencoding(utf-8)" 这些,一一尝试后仍未解决.去数据库查看了下,发现这个出现中文乱码的字段类型是varcha

读取数据库数据填充到缓存的问题,及修复方案一则

业务简述: 为了提高站点性能,部署了一台Redis,把资源从SqlServer数据库中同步到Redis,站点由原来的读取数据库,变更为读取Redis,以利用Redis的高并发提升站点性能目的. 环境说明: 1.假设表名为softs, 记录的更新时间字段名为 updateTime: 2.不考虑数据库的DELETE操作,只考虑INSERT和UPDATE操作: 3.流程中所有时间,都以数据库时间为准,以避免不同服务器之间的时间误差,导致数据遗漏. 4.重要的前提条件:数据库执行INSERT和UPDAT

C#使用SqlDataReader读取数据库数据时CommandBehavior.CloseConnection参数的作用

主要用在ExecuteReader(c)中,如果想要返回对象前不关闭数据库连接,须要用CommandBehavior.CloseConnection: CloseConnection解决了流读取数据模式下,数据库连接不能有效关闭的情况.当某个XXXDataReader对象在生成时使用了CommandBehavior.CloseConnection,那数据库连接将在XXXDataReader对象关闭时自动关闭. 由于流模式读取数据库的特点,在具体应用时很难确定数据库连接何时才能被关闭,因为读取的动

MVC设计模式下实现数据库的连接,并获取所有数据到浏览器页面上显示

实现建立一个学生的java类:里面封装了属性的全部属性: public class Student { private int id; private String username; private String password; public Student() { super(); } public Student(int id, String username, String password) { super(); this.id = id; this.username = user

PHP-----作业:查询数据,在页面上显示

作业:查询INFO表所有数据,显示在页面上(表格)性别要显示男女 民族 显示民族名称 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml">

通过mybatis读取数据库数据并提供rest接口访问

1 mysql 创建数据库脚本 -- phpMyAdmin SQL Dump -- version 4.2.11 -- http://www.phpmyadmin.net -- -- Host: localhost -- Generation Time: 2016-08-02 18:13:50 -- 服务器版本: 5.6.21 -- PHP Version: 5.6.3 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = &q