Frappe Chart ——折线图和饼状图

学习

1.请使用互联网上的图形工具(推荐: Frappe Chart)与以下中国历年GDP数据与世界主要各国军费预算。分别产生 Line chart与Pie chart，如下图所示。请同学完成此网页内容与相应所需的java script。

中国历年GDP数据:
年度: [1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017]

中国GDP(单位:百万美元): [1093997.267, 1211346.87, 1339395.719, 1470550.015, 1660287.966, 1955347.005, 2285965.892, 2752131.773,3552182.312, 4598206.091, 5109953.609, 6100620.489, 7572553.837, 8560547.315, 9607224.482, 10482372.11,11064666.28, 11190992.55, 12237700.48]

世界主要各国军费预算:
[‘美国’, ‘中国’, ‘欧盟’, ‘沙特’, ‘俄罗斯’, ‘印度’, ‘法国’, ‘英国’, ‘日本’, ‘其他国家总和’]
[610, 235, 200, 69.5, 66.3, 63.9, 57.8, 47.2, 45.4, 281.9]

代码实现

折线图

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Trend Charts</title><script src="frappe-charts.min.js"></script></head><body><div><div><h6>趋势图</h6><div id="chart-trends"></div></div></div><script>//放置图表，图表为Trends Chart//定义图表数据let trends_data = {//横坐标，设置为标签labels: [1999, 2000, 2001, 2002, 2003, 2004,2005, 2006, 2007, 2008, 2009, 2010, 2011,2012, 2013, 2014, 2015, 2016, 2017],//数据集datasets: [{//柱状图上的数据，设置为值values: [1093997.267, 1211346.87, 1339395.719, 1470550.015, 1660287.966, 1955347.005, 2285965.892, 2752131.773,3552182.312, 4598206.091, 5109953.609, 6100620.489, 7572553.837, 8560547.315, 9607224.482, 10482372.11,11064666.28, 11190992.55, 12237700.48]}]};let plotChartArgs = {title: "中国GDP历年成长情形(单位:百万美元)",//图表标题data: trends_data,//图表数据type: 'line',height: 300,colors: ['#ff00ff'],lineOptions: {hideDots: 0,//隐藏点heatline: 0,regionFill: 1,hideLine: 0//隐藏行},axisOptions: {xAxisMode: 'tick', //x轴线 隐藏yAxisMode: 'span',//y轴线  显示xIsSeries: 1 //设置多组数据的显示来自}};new Chart("#chart-trends", plotChartArgs);</script>
</body>
</html>

运行

饼状图

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Trend Charts</title><script src="frappe-charts.min.js"></script></head><body><div><div><h6>饼状图</h6><div id="chart-trends"></div></div></div><script>//放置图表，图表为Trends Chart//定义图表数据let trends_data = {//横坐标，设置为标签labels: ['美国', '中国', '欧盟', '沙特', '俄罗斯', '印度', '法国', '英国', '日本', '其他国家总和'],//数据集datasets: [{//图上的数据，设置为值values: [610, 235, 200, 69.5, 66.3, 63.9, 57.8, 47.2, 45.4, 281.9]}]};let plotChartArgs = {title: "中国GDP历年成长情形(单位:百万美元)",//图表标题data: trends_data,//图表数据type: 'pie',height: 300,colors: ['#ff00ff'],lineOptions: {hideDots: 0,//隐藏点heatline: 0,regionFill: 1,hideLine: 0//隐藏行},axisOptions: {xAxisMode: 'tick', //x轴线 隐藏yAxisMode: 'span',//y轴线  显示xIsSeries: 1 //设置多组数据的显示来自}};new Chart("#chart-trends", plotChartArgs);</script>
</body>
</html>

运行

总结

决定图表是柱状图，折线图，还是饼状图，是由 type 来决定。
type=‘bar’ ，是 柱状图
type=‘line’，是 折线图
type=‘pie’，是 饼状图

Frappe Chart ——折线图和饼状图相关推荐

jfreechart折线图+柱状图、柱状图(堆叠)+折线图、饼状图、环形图
记录jfreechart生成图片测试程,主要是为自己研究过之后的记录:) 折线图+柱状图柱状图(堆叠)+折线图获取饼状图获取环形图 jar包下载地址:https://download.csdn. ...
Web在jsp页面中生成柱状图，折线图，饼状图
一.前言在实际开发过程中,柱状图,折线图,饼状图在一些OA,ERP中是非常常见的功能,特别是需求方是业务型,数据分析型公司,下面的例子简单实现了饼状图,柱状图,折线图在jsp中生成.(ps:新手上路 ...
使用POI实现读取Excel数据并生成柱状图、折线图、饼状图的工具类
最近有一个需求是要通过程序自动根据excel中的数据来动态生成相应的图表.其中就有柱状图,折线图,饼状图.但是没想到用wps生成非常的简单,一点就可以生成,使用POI生成的过程非常的难受.不得不将这次 ...
Java后台生成图表——主代码（折线图，饼状图，柱状图，-》并产出图片PDF或其他格式的图片内容）
声明: 本文采用的数据均来源于网络,本人只用于学习记录,若有侵权,还望能及时联系. Maven 的 POM 依赖 <!--用于jfreechart生成图片 --&g ...
Android 开发第三方框架制作条形图、折线图、饼状图、水平条形图
Android 第三方框架MPAndroidChart-v3.1.0的简单使用这里写目录标题 Android 第三方框架MPAndroidChart-v3.1.0的简单使用前言引入库布局初始 ...
PHP MySQL饼状图 3d_Highcharts 饼状图(结合PHP、Mysql)
在做复杂的数据统计功能时会用到饼状图,饼状图用整个圆表示总体的数量或整体值1,用圆内各个扇形的大小表示各部分数量或该部分占总体的百分比,它可以清晰直观的表示各部分之间以及各部分与整体之间的数量关系. ...
Springboot+poi导入导出+echart 做出树状图以及饼状图
第一步:创建springboot项目:(创建项目省略) 第二步配置:pom依赖包 <dependencies><dependency><groupId>org.sp ...
Unity_扇形图（饼状图）+ UI动画
GitHub项目链接点这里(求一个star⭐) Unity_扇形图(饼状图)+ UI动画效果介绍关键字分析及代码绘图数据扇形元素 UIPieImage 1.定义参数 2.颜色注解 3.画扇 ...
Plotly.js使用详细介绍（折线图、饼状图、点图、水平条形图、桑基图、树状图、等值线图）
目录 0 写在前面 1 HTML代码 2 折线图 2.1 基本折线图 2.2 复杂折线图 2.2.1 轨迹 2.2.2 布局 3 饼状图 3.1 基本饼状图 3.2 饼图子图 3.3 甜甜圈图 4 点 ...

Frappe Chart ——折线图和饼状图

Frappe Chart ——折线图和饼状图

学习

代码实现

运行

运行

总结

Frappe Chart ——折线图和饼状图相关推荐

最新文章

热门文章