highcharts的简单使用

最新推荐文章于 2025-05-07 14:00:02 发布

追逐春天的大孩子

最新推荐文章于 2025-05-07 14:00:02 发布

阅读量418

点赞数

分类专栏： js 文章标签： highcharts

本文链接：https://blog.youkuaiyun.com/weixin_43709908/article/details/109473582

版权

js 专栏收录该内容

36 篇文章

订阅专栏

本文将介绍如何使用Highcharts库创建基本的图表。通过实例代码，展示Highcharts配置选项，包括设置图表类型、数据系列、轴线、标题等，帮助初学者快速上手。

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

效果图代码：

var option = {
                chart: {
                    spacingBottom: 20,
                    spacingTop: 60,
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false
                },
                legend: {
                    verticalAlign: 'top',
                    width: 500,
                    floating: true,
                    align: 'right',
                    x: 0,
                    y: -40,
                    itemWidth: 100,
                },
                plotOptions: {
                    series: {
                        marker: {
                            enabled: false
                        }
                    }
                },
                xAxis: {
                    crosshair: {
                        color: ' #CDD0D9',
                        width: 1
                    },
                    categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                },
                yAxis: {
                    title: {
                        text: '单位(人)'
                    }
                },
                tooltip: {
                    shared: true,
                    useHTML: true,
                    headerFormat: '<table>',
                    pointFormat: '<tr style="width:100px;font-size:14px;"><td style="color: #333333;height:24px;line-height:24px;">{series.name}: </td>' +
                        '<td style="text-align: right;height:24px;line-height:24px;"><b>{point.y}人 </b></td></tr>',
                    footerFormat: '</table>',
                },
                series: [{
                    data: [6, 4, 2, 6, 4, 2, 6, 4, 2, 6, 4, 2],
                    name: '1年以下',
                    color: '#00A189'
                }, {
                    data: [7, 3, 2, 1, 2, 6, 1, 2, 6, 1, 2, 6],
                    name: '1-3年',
                    color: '#16CBFF'
                }, {
                    data: [9, 4, 8, 7, 3, 2, 7, 3, 2, 7, 3, 2],
                    name: '3-5年',
                    color: '#1685FF'
                }, {
                    data: [1, 2, 6, 4, 6, 4, 4, 6, 4, 4, 6, 4],
                    name: '5-10年',
                    color: '#A26FB5'
                }, {
                    data: [4, 6, 4, 4, 6, 4, 4, 6, 4, 4, 6, 4],
                    name: '10年以上',
                    color: '#F94876'
                }]
            }

            var chart = Highcharts.chart(this.$el.find("#workTimeTrend").get(0), option)