highecharts在线制作柱状图、饼图的几个代码技巧。

下面的代码是使用highecharts库在线生成图标的示例代码；基础柱状图。

var chart = Highcharts.chart('container',{
	chart: {
		type: 'column'//改成bar之后是条形图，左右显示的
	},
	title: {
		text: '月平均降雨量'
	},
	credits: {
        enabled: false // 设置为 false 关闭版权标志
    },
	 legend: {
        enabled: true, // 设置为 false 关闭图例
        itemStyle: {
            color: 'black',    // 图例字体颜色
            fontSize: 14  // 图例字体大小
        }
    },
	subtitle: {
		text: '数据来源: WorldClimate.com'
	},
	xAxis: {
		categories: [
			'一月','二月','三月','四月'
		],
		title: {
            text: '横坐标',
            style: {
                fontSize: 14 // 设置横坐标轴标签字体大小
            }
        },
		gridLineWidth: 1,// 设置为 0 去掉 x 轴的网格线
		crosshair: true,
		labels: {
            style: {
                fontSize: 14  // 设置字体大小
            }
        }
	},
	yAxis: {
		min: 0,
		title: {
			text: '降雨量 (mm)',
			style: {
                fontSize: 14  // 设置纵坐标轴标签字体大小
            }
		},
		gridLineWidth: 1, // 设置为 0 去掉 y 轴的网格线
		labels: {
            style: {
                fontSize: 14  // 设置字体大小
            }
        }
	},
	tooltip: {
		// head + 每个 point + footer 拼接成完整的 table
		headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
		footerFormat: '</table>',
		shared: true,
		useHTML: true
	},
	plotOptions: {
		column: {
			borderWidth: 0,
			colorByPoint: false, //让每个柱状图都单独显示不同的颜色 
			dataLabels:{ //对于柱状图，dataLabels 可以用于在每个柱形上方显示该柱形的数值或文本。
			enabled:true, //启用数据标签
			color: '#ff7f50',  // 设置数据标签的颜色,也可以写英文单词black 
			align: 'center',  // 设置数据标签的对齐方式,left，right  
			x: 0,  // 设置数据标签的水平位置  
            y: 0,  // 设置数据标签的垂直位置 
			//borderWidth: 1,  // 设置数据标签边框的宽度  
            //borderColor: '#000',  // 设置数据标签边框的颜色
			style:{
				fontSize: 14 //改变数据标签自己的大小，注意要放在style里面
			}
		}}
	},
	series: [{
		name: '深圳',
		data: [49.9, 71.5, 106.4, 129.2],
		color:'#FF7F00' 	
		},
	{
		name: '上海',
		data: [110.1, 24.1, 16.4, 19.2],		
	}]
});

注意：无论是饼图还是柱状图，color参数既可以写十六进制：“#FF7F00”，也可以写英文字母“black”

饼图

下面是饼图的代码示例：

Highcharts.chart('container', {
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false,
		type: 'pie'
	},
	credits: {
        enabled: false // 设置为 false 关闭版权标志
    },
	title: {
		text: '2018年1月浏览器市场份额'
	},
	tooltip: {
		pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	},
	legend: {
        itemStyle: {
            color: 'black',    // 图例字体颜色
            fontSize: 14  // 图例字体大小
        }
    },
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				format: '<b>{point.name}</b>: {point.percentage:.1f} %',
				style: {
					color:  'black',
					fontSize:14 //改变数据标签的字体大小
				},
			},		
			showInLegend: true //设置false关闭下面的示例legend
		}
	},
	series: [{
		name: 'Brands',
		colorByPoint: true,
		data: [{
			name: '沈阳',
			y: 61.41,
			sliced: true,
			selected: true,
			color:'#FF7F00'
			
		}, 
		{name: '上海',y: 11.84,color: '#ff0000'}, 
		{name: '深圳',y: 10.8}, 
		{name: '北京',y: 4.67}, 
		{name: '广州',y: 4.18}]
	}]
});

图的结果是：