(四)、读取数据库数据并在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("]}]");

 

 

 

 

 

 

 

 

 

 


 

 

相关文章
|
3月前
|
存储 人工智能 Cloud Native
云栖重磅|从数据到智能:Data+AI驱动的云原生数据库
在9月20日2024云栖大会上,阿里云智能集团副总裁,数据库产品事业部负责人,ACM、CCF、IEEE会士(Fellow)李飞飞发表《从数据到智能:Data+AI驱动的云原生数据库》主题演讲。他表示,数据是生成式AI的核心资产,大模型时代的数据管理系统需具备多模处理和实时分析能力。阿里云瑶池将数据+AI全面融合,构建一站式多模数据管理平台,以数据驱动决策与创新,为用户提供像“搭积木”一样易用、好用、高可用的使用体验。
云栖重磅|从数据到智能:Data+AI驱动的云原生数据库
|
30天前
|
数据采集 数据库 Python
有哪些方法可以验证用户输入数据的格式是否符合数据库的要求?
有哪些方法可以验证用户输入数据的格式是否符合数据库的要求?
136 75
|
3月前
|
存储 监控 数据处理
flink 向doris 数据库写入数据时出现背压如何排查?
本文介绍了如何确定和解决Flink任务向Doris数据库写入数据时遇到的背压问题。首先通过Flink Web UI和性能指标监控识别背压,然后从Doris数据库性能、网络连接稳定性、Flink任务数据处理逻辑及资源配置等方面排查原因,并通过分析相关日志进一步定位问题。
273 61
|
2月前
|
SQL 存储 运维
从建模到运维:联犀如何完美融入时序数据库 TDengine 实现物联网数据流畅管理
本篇文章是“2024,我想和 TDengine 谈谈”征文活动的三等奖作品。文章从一个具体的业务场景出发,分析了企业在面对海量时序数据时的挑战,并提出了利用 TDengine 高效处理和存储数据的方法,帮助企业解决在数据采集、存储、分析等方面的痛点。通过这篇文章,作者不仅展示了自己对数据处理技术的理解,还进一步阐释了时序数据库在行业中的潜力与应用价值,为读者提供了很多实际的操作思路和技术选型的参考。
53 1
|
2月前
|
存储 Java easyexcel
招行面试:100万级别数据的Excel,如何秒级导入到数据库?
本文由40岁老架构师尼恩撰写,分享了应对招商银行Java后端面试绝命12题的经验。文章详细介绍了如何通过系统化准备,在面试中展示强大的技术实力。针对百万级数据的Excel导入难题,尼恩推荐使用阿里巴巴开源的EasyExcel框架,并结合高性能分片读取、Disruptor队列缓冲和高并发批量写入的架构方案,实现高效的数据处理。此外,文章还提供了完整的代码示例和配置说明,帮助读者快速掌握相关技能。建议读者参考《尼恩Java面试宝典PDF》进行系统化刷题,提升面试竞争力。关注公众号【技术自由圈】可获取更多技术资源和指导。
|
2月前
|
前端开发 JavaScript 数据库
获取数据库中字段的数据作为下拉框选项
获取数据库中字段的数据作为下拉框选项
65 5
|
3月前
|
SQL 关系型数据库 数据库
国产数据实战之docker部署MyWebSQL数据库管理工具
【10月更文挑战第23天】国产数据实战之docker部署MyWebSQL数据库管理工具
271 4
国产数据实战之docker部署MyWebSQL数据库管理工具
|
3月前
|
关系型数据库 MySQL 数据库
GBase 数据库如何像MYSQL一样存放多行数据
GBase 数据库如何像MYSQL一样存放多行数据
|
3月前
|
关系型数据库 分布式数据库 数据库
云栖大会|从数据到决策:AI时代数据库如何实现高效数据管理?
在2024云栖大会「海量数据的高效存储与管理」专场,阿里云瑶池讲师团携手AMD、FunPlus、太美医疗科技、中石化、平安科技以及小赢科技、迅雷集团的资深技术专家深入分享了阿里云在OLTP方向的最新技术进展和行业最佳实践。
|
4月前
|
人工智能 Cloud Native 容灾
云数据库“再进化”,OB Cloud如何打造云时代的数据底座?
云数据库“再进化”,OB Cloud如何打造云时代的数据底座?

热门文章

最新文章