前端实现饼图、堆叠柱状图、折线图

最新推荐文章于 2024-03-18 15:36:14 发布
最新推荐文章于 2024-03-18 15:36:14 发布
阅读量2.2w 收藏 43
点赞数 10
分类专栏： myWork-- 文章标签： 饼图 折线图 堆叠柱状图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/52473976
版权

我觉得根据框架的API，就能够修改样式，得到你想要的结果，灵活运用就好。

这两天做了’带图例还百分比的饼图‘，‘堆叠状的柱状图’，‘折线图’。

我使用的是highcharts这个框架，我觉得还是不错的，有详细的介绍和api。

另外，我在查资料的过程中，还发现的图表类的框架有jfreechart,   echarts.以后可以尝试使用。

1，饼图

<pre name="code" class="html"><!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>
    <style>
        g.highcharts-grid:nth-child(6) > path {
            stroke-width: 0;
        }
    </style>
    <script src="js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
            $(function () {
                $('#container_1').highcharts({
                chart: {
                    type: 'pie',
					backgroundColor:"#EEF3FA",
                    x:-200,
                    height: 250,
                    marginLeft:-150
                   
                },
                credits: {
                    enabled: false   //右下角不显示LOGO
                },
                title: {
                    text: '',
                },
                subtitle: {
                    text: '',
                },
                exporting: {//Highcharts 图表导出功能模块。
                    enabled: false
                },
                colors: ['#E2214E', '#F7B52B', '#0749C3', '#66FE17',
                         '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
                legend: {
                    layout: 'vertical',
                    floating: true,
                    backgroundColor: '#EEF3FA',
                    align: 'right',
                    verticalAlign: 'top',
                    y: 35,
                    x: -20,
                    itemMarginBottom :5,//图例的上下间距
                    maxHeight: 200,
                    symbolHeight: 14,//高度
                    symbolWidth:14
                },
              
                plotOptions: {
                    pie: {
                        allowPointSelect: false,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true,
                        symbolWidth: 24,
                        point: {
                            events: {
                                legendItemClick: function (e) {
                                    return false; // 直接 return false 即可禁用图例点击事件
                                }
                            }
                        }
                    }
                },
                 
                series: [{
                    data: [
                        ['高危'+'(10盘)' +'<br><span style="text-align:center;">10%</span>', 10.0],
                        ['危险'+'(22盘)'+'<br><span style="text-align:center;">21.9%</span>',     21.9],
                        ['只读'+'(28盘)'+'<br><span style="text-align:center;">28.1%</span>',28.1],
                        ['健康'+'(28盘)'+'<br><span style="text-align:center;">28.1%</span>',     28.1]
                    ]
                }]
            });
        });
           
    </script>
    <script src="js/highcharts.js"></script>
    <script src="js/info_alert.js"></script>
</head>
<body>
    <div id="container_1" style="width:100%; margin: 0 auto;background-color:#EEF3FA"></div>
  
</body>
</html>


 
 

 

2，堆叠柱状图
 

 

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>
    <link rel="stylesheet" type="text/css" href="css/column_diagram.css" />
    <link rel="stylesheet" type="text/css" href="css/info_report.css" />
	<style>
	g.highcharts-grid:nth-child(6) > path{
		stroke-width:0;
	}
    .highcharts-legend{
        margin-top:-30px;
    }
  g.highcharts-series:nth-child(7) > rect{
      width:32px !important;
  }
	</style>
    <script src="js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',    //指定图表的类型，默认是折线图（line）
            
        },
        credits: {
            enabled: false   //右下角不显示LOGO
        },
        title: {
            text: '',
        },
        subtitle: {
            text: '',
        },
        exporting: {//Highcharts 图表导出功能模块。
            enabled: false
        },
        plotOptions: {
            column: {
                stacking: 'percent'
            }
        },
        xAxis: {
            title: {
                text: '保存时间',
                align: 'high',
                rotation: 0,
            },
            categories: ['LT04', 'LT05', 'LT06'],
            labels: {
                align: 'center',
            },
            lineColor: '#000000',
            lineWidth: '2',
            tickColor: '#000000',
            tickWidth: 1,
            type: 'linear',
            tickmarkPlacement: 'on',


        },
        yAxis: {
            title: {
                align: 'high',
                offset: 0,
                text: '数量',
                rotation: 0,
                y: -25
            },
            plotLines: [{//通过颜色线横贯在绘图区域上标记轴中的一个特定值
                value: 0,
                width: 1,
                color: '#808080'
            }],
            lineColor: 'black',
            lineWidth: '2'
        },
        legend: { //图例说明是包含图表中数列标志和名称的容器
            align: 'center',
            verticalAlign: 'top',
            x: 20,
            y: 10,
            symbolHeight: 14,//高度
            symbolWidth:14
        },
        //禁用点击图例隐藏
        series: [{
            name: '高危',
            data: [5, 3, 4],
            color: '#E2214E',
        }, {
            name: '危险',
            data: [2, 7, 3],
            color: '#F7B52B'
        }, {
            name: '只读',
            data: [3, 4, 4],
            color: '#0749C3'
        },{
            name: '健康',
            data: [3, 4, 4],
            color: '#66FE17'
        }
    ]});
});
    </script>
    <script src="js/highcharts.js"></script>
    <script src="js/exporting.js"></script>
</head>
<body style="position:relative;">
    <div id="container" style="width:90%; height:250px; margin: 0 auto">
    </div>
    <div class="axis">
        <i></i>
    </div>
    <div class="axisy">
        <i class="y"></i>
    </div>
</body>
</html>

 
 

 

3，折线图
 

 

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>
    <link rel="stylesheet" type="text/css" href="css/info_report.css" />
    <link rel="stylesheet" type="text/css" href="css/broken_line.css" />
	<style>
		g.highcharts-grid:nth-child(6) > path{
			stroke-width:0;
		}
        #container{
             width:100%;
        }
        .highcharts-background{
            width:100%;
        }
      .highcharts-series-group{
          margin-top:-100px;
      }
      
     g.highcharts-axis{
         margin-top:-10%;
     }
     g.highcharts-axis:nth-child(7) > path:nth-child(1){
         margin-top:-10%;
     }
	</style>
    <script src="js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line',    //指定图表的类型，默认是折线图（line）
        },
        credits: {            
            enabled: false   //右下角不显示LOGO        
        },
        title: {
            text: '',
        },
        subtitle: {
            text: '',
        },
        exporting: {//Highcharts 图表导出功能模块。
            enabled: false
        },
        xAxis: {
            title: {
                text: '保存时间',
                align: 'high',
                rotation: 0,
                x:10,
                y:0,
            },
            categories: ['1年', '2年', '3年', '4年', '5年', '6年','7年'],
            labels: {
                align: 'center',
            },
            lineColor: '#000000',
            lineWidth: '2',
            tickColor: '#000000',
            tickWidth: 1,
            type: 'linear',
            tickmarkPlacement: 'on',
            
           
        },
        yAxis: {
            title: {
                align: 'high',
                offset: 0,
                text: '数量',
                rotation: 0,
                y: -25,
            },
            plotLines: [{//通过颜色线横贯在绘图区域上标记轴中的一个特定值
                value: 0,
                width: 1,
                color: '#808080'
            }],
            lineColor: 'black',
            lineWidth: '2',
            max:100
        },
      
        legend: { //图例说明是包含图表中数列标志和名称的容器
            align: 'center',
            verticalAlign: 'top',
            x: 30,
            y: 10,//修改距离上面的高度
        },
        //禁用点击图例隐藏
        plotOptions: {
            series: {
                events: {
                    legendItemClick: function(e) {
                        return false; // 直接 return false 即可禁用图例点击事件
                    }
                }
            }
        } ,
        series: [{
            name: '高危',
            color: '#E1204E',
            data: [20.0, 20.0, 41.2, 30.4, 50.2, 14.0, 10.0],
        }, {
            name: '危险',
            color: '#F8B52A',
            data: [15.6, 30.9, 10.5, 20.5, 37.0, 38.0, 45.0]
        }, {
            name: '只读',
            color: '#0749C3',
            data: [50.1, 10.6, 43.5, 38.4, 13.5, 37.0, 50.0]
        }, {
            name: '健康',
            color: '#7CFF06',
            data: [33.9, 24.2, 15.7, 23.5, 20.9, 35.2, 47.0]
        },
    ]});
});
    </script>
    <script src="js/highcharts.js"></script>
    <script src="js/exporting.js"></script>
</head>
<body>
    <div id="container" style="width:90%; height:250px; margin: 0 auto">
    </div>
    <div class="axis">
        <i></i>
    </div>
    <div class="axisy">
        <i class="y"></i>
    </div>
</body>
</html>

 

 
 

 

http://www.hcharts.cn/demo/highcharts
 

                

        

        

    




    

      

        

            

              
                
                  java_zhaoyanli
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    10
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    43
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  3
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
前端饼状图

				
			

			

				

					10-30
				

			

		

		

			
				
饼状图模块，鼠标触碰饼状图的每一份都会有动画效果，并且自己可以根据需求该颜色、数据占比。

			
		

	



                

              
                



	

		

			

				
					
Vue+Echarts: 实现饼状图的详细教程

				
			

			

				

					七一
				

				

					03-10
					
					9638
					
				

			

		

		

			
				
4. 在模板中绘制饼图 最后，在 Vue 组件的模板中，你需要添加一个用来呈现饼图的 div 元素，并通过 ref 属性引用它。然后，你可以在模板中使用这个 ref 来调用 ECharts 实例。1、安装 ECharts 首先，你需要在项目中安装 ECharts。2、创建一个 ECharts 实例 在 Vue 组件中，你可以通过引入 ECharts 库，然后在组件中使用。方法中，你可以为饼图配置 ECharts 配置项。例如，你可以设置饼图的颜色、大小、数据等。3、配置 ECharts 在。

			
		

	



                


  
              

                


	

		

			

				
					
2024 年 Web 开发常用的五个图标库（建议收藏），前端零基础开发

					
最新发布

				
			

			

				

					weixin_58132019的博客
				

				

					03-18
					
					1062
					
				

			

		

		

			
				
imgFlaticon 是另一个有名的图标库，我们可以将其用于 UI 设计，它以免费和高级软件包的形式提供了超过 200 万个不同的图标。像 Icons8 一样，你可以在下载之前编辑 Flaticon 图标。但是，Flaticon 不提供像 Icons8 那样丰富的编辑选项。另一方面，你可以下载分辨率可达 512 像素的 PNG 版本图标。如前所述，Flaticon 还分为免费和付费版本，用户可以在付费版本中使用大量更高级的图标。

			
		

	





	

		

			

				
					
JavaScript练手小技巧：用Canvas绘制饼图

				
			

			

				

					九天翔龙的技术博客
				

				

					12-09
					
					931
					
				

			

		

		

			
				
饼图是数据可视化很重要的一个组成部分。这个案例虽然没有 Echarts 那么好看，但是作为了解Canvas的基础案例，还是很有必要练习下。

			
		

	



		

			
		



	

		

			

				
					
Canvas绘制饼状图、绘制文字、绘制图像

				
			

			

				

					知之为知之，不知为不知
				

				

					08-27
					
					1135
					
				

			

		

		

			
				
canvas 绘制圆弧；canvas 绘制扇形；canvas 绘制饼形图；canvas 绘制圆角矩形；canvas 绘制文字；canvas 设置文字属性；canvas 绘制图片；canvas 平移转换；canvas 旋转转换；canvas 缩放转换；canvas 绘制一个n等分的圆；canvas 绘制饼状图；canvas 绘制折线图；

			
		

	





	

		

			

				
					
java圆饼图插件,JavaScript使用百度ECharts插件绘制饼图操作示例

				
			

			

				

					weixin_39836536的博客
				

				

					03-21
					
					195
					
				

			

		

		

			
				
本文实例讲述了JavaScript使用百度ECharts插件绘制饼图操作。分享给大家供大家参考，具体如下：百度ECharts是一款由百度前端团队开发与维护的，基于HTML5的开源JavaScript图表库。E是Enterprise的简称，意思是商业级数据图表。本文简述使用ECharts绘制饼图(Pie Chart)的过程，下图为使用ECharts绘制的饼图实例。首先需要在页面中新建标签，引入符合A...

			
		

	





	

		

			

				
					
前端学习（1795）：前端调试之绘制饼图

				
			

			

				

					歌谣的博客
				

				

					07-29
					
					363
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>D.

			
		

	





	

		

			

				
					
JS-ECharts-前端图表 多层级联合饼图、柱状堆叠图、柱/线组合图、趋势图、自定义中线、平均线、气泡备注点

				
			

			

				

					君琴 的博客
				

				

					09-23
					
					2088
					
				

			

		

		

			
				
JavaScript编码，使用ECharts绘制前端图表：多层级联合饼图、柱状堆叠图、柱/线组合图、趋势图、自定义中线、平均线、气泡备注点、自定义数据分类占比、批注内容等

			
		

	





	

		

			

				
					
前端vue echart自定义图表(柱形图 折线图 饼图 树形结构图 关系图谱 )

				
			

			

				

					chenchuang0128的博客
				

				

					05-30
					
					3333
					
				

			

		

		

			
				
前端组件化开发：使用ECharts快速实现自定义图表摘要：随着前端开发技术的发展，组件化开发已成为提高开发效率和降低维护成本的有效手段。本文将介绍如何使用ECharts库进行前端组件化开发，快速实现自定义的图表，包括柱形图、折线图、饼图、树形结构图和关系图谱等。通过结合业务特性的模块拆分策略、模块间的交互方式和构建系统等，可以实现灵活的组件组合和扩展，提高开发效率和降低维护成本。一、引言在前端开发中，图表的展示对于数据的可视化具有重要意义。

			
		

	





	

		

			

				
					
html堆叠柱状图脚本,echart 堆叠柱状图

				
			

			

				

					weixin_36184307的博客
				

				

					06-22
					
					398
					
				

			

		

		

			
				
1，实现效果image.png2，前端代码实现var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};var qsData =[];var fkData =[];var qslvData =[];var fklvData =[];option = null;option ...

			
		

	





	

		

			

				
					
vue前端动态绘制饼图（个人整理）

				
			

			

				

					qq_44195558的博客
				

				

					09-26
					
					4708
					
				

			

		

		

			
				
1、导入
npm install echarts --s

2、在需要使用的vue组件中引用
import echarts from 'echarts'

3、界面处规定一个div
<el-col :span="12">
        <!--为echarts准备一个具备大小的容器dom-->
          <div id="pie" style="width: 600px;height: 400px;"></div>
      </el-co

			
		

	





	

		

			

				
					
Echarts+ajax+java+mysql实现饼图+折线图+柱状图

				
			

			

				

					07-13
				

			

		

		

			
				
对Echarts3.0的基本图表实现，即饼图，折线图，柱状图。 从数据库读取数据显示在前台，图表可根据数据库数据实时更新。

			
		

	





	

		

			

				
					
Axure动态图表+折线图+饼图+柱状图

				
			

			

				

					10-28
				

			

		

		

			
				
Axure动态图表+折线图+饼图+柱状图； 饼状图、柱状图、折线图含交互动画； 软件版本：Axure8.1（兼容Axure9、Axure10）

			
		

	





	

		

			

				
					
echarts柱状图饼图折线图.zip

				
			

			

				

					07-31
				

			

		

		

			
				
echarts 电脑端 柱状图 折线图 饼图 散点图 js html

			
		

	





	

		

			

				
					
qt下 饼图 折线图 柱状图

				
			

			

				

					06-13
				

			

		

		

			
				
qt下用ChartDirector控件开发的饼图、柱状图、折线图实例程序，并可以设置截图目录，进行截图;“ChartDirector”文件夹下为头文件和lib文件

			
		

	





	

		

			

				
					
css实现渐变色，从做到右，从上到下

					
热门推荐

				
			

			

				

					java_zhaoyanli的专栏
				

				

					12-28
					
					3万+
					
				

			

		

		

			
				
1，从左到右的渐变色：
background:#74F195;
	background:-webkit-linear-gradient(left,#74F195,#C8FF9A);
	background:-o-linear-gradient(right,#74F195,#C8FF9A);
	background:-moz-linear-gradient(right,#74F195,#C8FF9

			
		

	





	

		

			

				
					
显示元素的show方法

				
			

			

				

					java_zhaoyanli的专栏
				

				

					08-01
					
					9961
					
				

			

		

		

			
				
css中有display:none属性，同时也有display:block，所以jQuery同样提供了与hide相反的show方法

方法的使用几乎与hide是一致的，hide是让元素显示到隐藏，show则是相反，让元素从隐藏到显示

看一段代码：使用上一致，结果相反

$('elem').hide(3000).show(3000);


$('elem').hide(3000)

			
		

	





	

		

			

				
					
NetBeans无法运行的可能错误

				
			

			

				

					java_zhaoyanli的专栏
				

				

					08-24
					
					8913
					
				

			

		

		

			
				
 

首先，

1，配置文件

 

D:\My-work\ruanjian\Environment\iAMP_WORK\variable\config



down下来这个文件后，先看配置文件的名字和本地的名字是否一致，



环境变量：



2，检查jar包是否下载好了，可以手动导入。

可以手动导入，也可以放到C盘

C:\Users\xryc\.m2\repository\org\ap...

			
		

	





	

		

			

				
					
matplotlib国内旅游人数柱状图折线图饼图

				
			

			

				

					06-07
				

			

		

		

			
				
好的，下面是一个简单的 matplotlib 可视化实例，展示如何使用 matplotlib 绘制国内旅游人数的柱状图、折线图和饼图：

```python
import matplotlib.pyplot as plt
import numpy as np

# 生成数据
year = np.array([2015, 2016, 2017, 2018, 2019, 2020])
people = np.array([413, 452, 512, 577, 610, 255])

# 绘制柱状图
plt.bar(year, people)

# 添加标题和标签
plt.title('Domestic Tourism in China (Bar Chart)')
plt.xlabel('Year')
plt.ylabel('People (million)')

# 显示图形
plt.show()

# 绘制折线图
plt.plot(year, people)

# 添加标题和标签
plt.title('Domestic Tourism in China (Line Chart)')
plt.xlabel('Year')
plt.ylabel('People (million)')

# 显示图形
plt.show()

# 绘制饼图
labels = ['2015', '2016', '2017', '2018', '2019', '2020']
plt.pie(people, labels=labels, autopct='%1.1f%%')

# 添加标题
plt.title('Domestic Tourism in China (Pie Chart)')

# 显示图形
plt.show()
```

在这个例子中，我们先使用`numpy`库生成了一组国内旅游人数的数据，然后分别使用`bar`函数绘制了柱状图，`plot`函数绘制了折线图，和`pie`函数绘制了饼图。最后添加了标题和标签，并使用`show`函数显示图形。

如果你想绘制其他类型的可视化图表，可以根据具体需求选择不同的函数和参数。具体可以查看matplotlib官方文档。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值