Highcharts库-柱状图的简单使用

最新推荐文章于 2024-04-26 16:47:03 发布

weixin_34119545

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量177

点赞数 1

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cc5ba7ef265da038b202395

版权

根据cdn引入Highcharts库：

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>复制代码

页面添加图标渲染DOM节点：

<div id="container"></div>复制代码

创建图表对象：

const chart = Highcharts.chart('container', {
    chart: {
        type: 'column' // 图表默认类型：column为柱状图
    },
    title: {
        text: 'This is chart text title' // 标题文本
    },
    series: [ // 数据列数组，图表中渲染数据的集合
        { // 数据对象，在柱状图中为该对象的柱子集合
            name: 'xiaoming', // 数据对象的name，也是图例的名称
            data: [10, 30, 40, 20, 60] // 渲染成柱子
        },
        {
            name: 'xiaohong',
            data: [5, 30, 80, 30, 20, 20]
        }
    ],
    credits: {
	enabled: false // 禁用版权信息
    }
}) 复制代码

效果图：

完整代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
</head>
<body>
	<div id="container" style="width: 500px; height: 400px;"></div>
	<script type="text/javascript">
		const chart = Highcharts.chart('container', {
			chart: {
				type: 'column'
			},
			title: {
				text: 'This is chart text title'
			},
			series: [
				{
					name: 'xiaoming',
					data: [10, 30, 40, 20, 60]
				},
				{
					name: 'xiaohong',
					data: [5, 30, 80, 30, 20, 20]
				}
			],
			credits: {
				enabled: false
			}
		}) 
	</script>
</body>
</html>复制代码

可点击Highcharts官网，或复制链接www.highcharts.com.cn/

注意事项：

Error 13 图标容器不存在，填入的选择器有错，或没有该选择器

weixin_34119545

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Highcharts库-柱状图的简单使用

根据cdn引入Highcharts库：<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>复制代码页面添加图标渲染DOM节点：<div id="container"></div>复制代码创建图表对象：const chart = Highcharts....
复制链接

扫一扫