小白瞎搞--Highcharts图表的基础使用，让前端页面有点小6

旧城等待， 2021-07-04 11:03 279阅读 0赞

## **Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。** ##

点击进入[官网][Link 1]

## **直接上实例：** ##

1.  下载官网提供的js包  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dUV1pldXM_size_16_color_FFFFFF_t_70]**注意前提要引入了jq基本文件。因为它也是基于jq开发的图表**  
    把官网下载的压缩包解压后，只引入code文件夹中的：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dUV1pldXM_size_16_color_FFFFFF_t_70 1]
2.  **看看官网给的实例，了解基本参数，例如饼状图：**

```java //首先页面上有一个div的id为“container” <div id="container" style="min-width:400px;height:400px"></div> //container对应的就是div的id `Highcharts.chart('container', { 
    	chart: { 
    		plotBackgroundColor: null,
    		plotBorderWidth: null,
    		plotShadow: false,
    		type: 'pie'//图表类型
    	},
    	title: { 
    		text: '2018年1月浏览器市场份额'//图表的标题
    	},
    	tooltip: { 
    		pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'//精确到几位
    	},
    	plotOptions: { 
    		pie: { 
    			allowPointSelect: true,
    			cursor: 'pointer',
    			dataLabels: { 
    				enabled: true,
    				format: '<b>{point.name}</b>: {point.percentage:.1f} %',
    				style: { 
    					color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
    				}
    			}
    		}
    	},
    	series: [{ 
    		name: 'Brands',
    		colorByPoint: true,
    		//特别注意是这里data的数据格式为json格式
    		data: [{ 
    			name: 'Chrome',
    			y: 61.41,
    			sliced: true,
    			selected: true
    		}, { 
    			name: 'Internet Explorer',
    			y: 11.84
    		}, { 
    			name: 'Firefox',
    			y: 10.85
    		}, { 
    			name: 'Edge',
    			y: 4.67
    		}, { 
    			name: 'Safari',
    			y: 4.18
    		}, { 
    			name: 'Sogou Explorer',
    			y: 1.64
    		}, { 
    			name: 'Opera',
    			y: 1.6
    		}, { 
    			name: 'QQ',
    			y: 1.2
    		}, { 
    			name: 'Other',
    			y: 2.61
    		}]
    	}]
    });`

1.  **按照图表要求的相关格式，从后台传入数据，然后就可以展示前端就可以根据后台的数据展示对应的图表了**

如果图表没有出来，先打开前端页面的调试器，看看json数据是否符合要求。哪怕是一个双引号都会引起图标的异常

[Link 1]: https://www.highcharts.com.cn/demo/highcharts
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dUV1pldXM_size_16_color_FFFFFF_t_70]: /images/20210704/dd3f6fe4a7724e5496ad33eb2431418e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dUV1pldXM_size_16_color_FFFFFF_t_70 1]: /images/20210704/7207c4b004364b5bb30bae9a49facb79.png