Highcharts首次使用记录

酱油ooo-

已于 2022-02-18 14:17:24 修改

阅读量407

点赞数

文章标签： echarts 前端 jquery

于 2022-02-17 17:10:50 首次发布

本文链接：https://blog.youkuaiyun.com/Ricale/article/details/122984889

版权

本文记录了作者首次在项目中使用Highcharts的过程，包括官网样例代码、配置方法和遇到的问题，如：credits属性的设置、图表宽高调整、轴标题与位置控制、legend与tooltip的使用、series数据结构等，旨在分享实战经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Highcharts 演示 | Highcharts 首先贴上Highcharts官网的演示网址

这是第一次在项目中引用Highcharts，之前都是练习项目中自行练习使用，还是遇到了不少问题的，就在这里记录一下吧

一、在官网找到的样例代码

二、自己的使用方法

三、遇到的问题

1：credits属性：用于禁用或启用Highcharts水印，在图的右下角

2：柱状图宽高可手动设置

3：x轴和y轴都可自行设置标题以及位置和旋转角度

一、在官网找到的样例代码

var chart = Highcharts.chart('container', {
	chart: {
		type: 'column'
	},
	title: {
		text: '全球各大城市人口排行'
	},
	subtitle: {
		text: '数据截止 2017-03，来源: <a href="https://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
	},
	xAxis: {
		type: 'category',
		labels: {
			rotation: -45  // 设置轴标签旋转角度
		}
	},
	yAxis: {
		min: 0,
		title: {
			text: '人口 (百万)'
		}
	},
	legend: {
		enabled: false
	},
	tooltip: {
		pointFormat: '人口总量: <b>{point.y:.1f} 百万</b>'
	},
	series: [{
		name: '总人口',
		data: [
			['上海', 24.25],
			['卡拉奇', 23.50],
			['北京', 21.51],
			['德里', 16.78],
			['拉各斯', 16.06],
			['天津', 15.20],
			['伊斯坦布尔', 14.16],
			['东京', 13.51],
			['广州', 13.08],
			['孟买', 12.44],
			['莫斯科', 12.19],
			['圣保罗', 12.03],
			['深圳', 10.46],
			['雅加达', 10.07],
			['拉合尔', 10.05],
			['首尔', 9.99],
			['武汉', 9.78],
			['金沙萨', 9.73],
			['开罗', 9.27],
			['墨西哥', 8.87]
		],
		dataLabels: {
			enabled: true,
			rotation: -90,
			color: '#FFFFFF',
			align: 'right',
			format: '{point.y:.1f}', // :.1f 为保留 1 位小数
			y: 10
		}
	}]
});

二、自己的使用方法

 let options = {
                credits: {
                    enabled: false // 禁用版权信息
                  },
                chart: {
                    type: 'column',
                    width: '900'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    type: 'category',
                    labels: {
                        rotation: -45  // 设置轴标签旋转角度
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '（次）',
                        rotation: 0,
                        x: 12,
                        y: 185
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '浏览次数: <b>{point.y:.1f} 次</b>'
                },
                series: [{
                    name: '总人口',
                    color: '#03B298',
                    data: data,
                    dataLabels: {
                        enabled: false,
                        color: '#02C8AA',
                        align: 'right',
                        format: '{point.y:.1f}', // :.1f 为保留 1 位小数
                        y: 10
                    }
                }]
            }
            Highcharts.chart(me.$el.find('.barChart').get(0), options)