二、创建第一个图表

最新推荐文章于 2024-08-18 21:13:03 发布

ab_xue

最新推荐文章于 2024-08-18 21:13:03 发布

阅读量276

点赞数

分类专栏： highchart 文章标签： highchart

本文链接：https://blog.csdn.net/ab_xue/article/details/76790642

版权

highchart 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

一、创建基础条形图

1. 创建 div 容器

在页面的 body 部分创建一个 div，并指定必须的属性（ID，高度和宽度等），代码如下

<div id="container" style="min-width:800px;height:400px"></div>

2. 编写图表配置代码

创建 div 容器后，就可以开始编写 Highcharts 图表配置代码，这部分代码用 <script></script> 包括，可以放在页面代码的任意位置（当然最好的做法是放在 </body> 之前）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="src/highcharts.css">
    <script type="text/javascript" src="src/highcharts.js"></script>
</head>
<body>

    <div id="container" style="min-width:800px;height:400px"></div>

    <script type="text/javascript">
        var chart = new Highcharts.Chart('container', {
            chart:{type:"bar"}, //指定图表的类型，默认是折线图（line）
            title:{
                 text: '我的第一个图表'  //指定图表标题
            },
            xAxis:{
                categories: ['苹果', '香蕉', '橙子']   //指定x轴分组
            },
            yAxis: {
                title: {
                    text: 'something'                 //指定y轴的标题
                }
            },
            series:[{                               //指定数据列
                name: '小明',                    //数据列名
                data: [1, 0, 4]                 //数据 
            },{
                name: '小红',
                data: [5, 7, 3]
            }]
        });
    </script>

</body>
</html>