二、创建第一个图表

来源：互联网发布：怎么举报网络博客编辑：程序博客网时间：2024/06/06 04:01

一、创建基础条形图

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>

阅读全文

0 0