二、创建第一个图表

xiaoxiao2021-02-28  110

一、创建基础条形图

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>
转载请注明原文地址: https://www.6miu.com/read-58215.html

最新回复(0)