(四)、读取数据库数据并在HighCharts上显示

简介: 在上一篇简单的静态例子中,大家应该可以看得出,图表里横纵坐标的数据都是静态的几个数据,因此我们只要从数据库读取出我们想要的横纵坐标值,然后动态赋给Chart就行了。

在上一篇简单的静态例子中,大家应该可以看得出,图表里横纵坐标的数据都是静态的几个数据,因此我们只要从数据库读取出我们想要的横纵坐标值,然后动态赋给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("]}]");

 

 

 

 

 

 

 

 

 

 


 

 

相关文章
|
1月前
|
存储 Oracle 关系型数据库
Dataphin常见问题之想要周期执行任务如何解决
Dataphin是阿里云提供的一站式数据处理服务,旨在帮助企业构建一体化的智能数据处理平台。Dataphin整合了数据建模、数据处理、数据开发、数据服务等多个功能,支持企业更高效地进行数据治理和分析。
|
1月前
|
SQL 开发框架 JavaScript
在 Vue 中进行数据持久化时,有哪些常用的数据库框架?
在 Vue 中进行数据持久化时,有哪些常用的数据库框架?
49 3
|
1月前
|
存储 数据管理 数据处理
数据之光:探索数据库技术的演进之路
数据之光:探索数据库技术的演进之路
60 1
|
1月前
|
存储 运维 关系型数据库
数据的力量:构筑现代大型网站之数据库基础与应用
数据的力量:构筑现代大型网站之数据库基础与应用
51 0
|
1月前
|
SQL Java 数据库连接
从来没想到我们会扒拉nohup文件去找我们想要的数据,然后往数据库中添加。。。...
从来没想到我们会扒拉nohup文件去找我们想要的数据,然后往数据库中添加。。。...
17 0
|
1月前
|
SQL 关系型数据库 MySQL
【MySQL 数据库】2、MySQL 的数据控制语言、函数和约束
【MySQL 数据库】2、MySQL 的数据控制语言、函数和约束
31 0
|
1月前
|
NoSQL Java 数据库连接
使用Java实现从数据库查出数据存入Redis,并在查询时先查Redis,如果Redis中没有数据再从数据库中读取
使用Java实现从数据库查出数据存入Redis,并在查询时先查Redis,如果Redis中没有数据再从数据库中读取
355 1
|
2月前
|
关系型数据库 MySQL 数据库
|
7天前
|
存储 关系型数据库 MySQL
如何处理爬取到的数据,例如存储到数据库或文件中?
处理爬取的数据,可存储为txt、csv(适合表格数据)或json(适合结构化数据)文件。若需存储大量数据并执行复杂查询,可选择关系型(如MySQL)或非关系型(如MongoDB)数据库。以MySQL为例,需安装数据库和Python的pymysql库,创建数据库和表,然后编写Python代码进行数据操作。选择存储方式应考虑数据类型、数量及后续处理需求。
15 1
|
8天前
|
SQL 关系型数据库 MySQL
关系型数据库插入数据的语句
使用SQL的`INSERT INTO`语句向关系型数据库的`students`表插入数据。例如,插入一个`id`为1,`name`为&#39;张三&#39;,`age`为20的记录:`INSERT INTO students (id, name, age) VALUES (1, &#39;张三&#39;, 20)。如果`id`自增,则可简化为`INSERT INTO students (name, age) VALUES (&#39;张三&#39;, 20)`。
11 2

热门文章

最新文章