Highcharts库-柱状图的简单使用

一时失言乱红尘 2022-01-20 12:27 313阅读 0赞

根据cdn引入Highcharts库：

页面添加图标渲染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官网][Highcharts]，或复制链接[www.highcharts.com.cn/][Highcharts]

注意事项：

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

[Highcharts]: https://link.juejin.im?target=https%3A%2F%2Fwww.highcharts.com.cn%2F